【CSS】object-fit テスト実装

参考:
【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー
1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー
object-fit

object-fit: fill;

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

object-fit: contain;

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

object-fit: cover;

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

object-fit: none;

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

object-fit: scale-down;

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

object-position

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

object-position

IE対応:object-fit-images (object-fit: contain;)

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

<script type="text/javascript" src="https://haikararou.com/ichiriki/20210107/ofi.min.js"></script>
<style>
.container{
    display: flex;
    justify-content: space-between;
}
.container-item{
    width: 30%;
}
.container-item-img{
    border: 1px solid #ccc;
    height: 150px;
    overflow: hidden;
}
.container-item-img img{
    display: block;
    height: 150px;
    object-fit: fill;
    width: 100%;
}
.container2 .container-item-img img{
    object-fit: contain;
}
.container3 .container-item-img img{
    object-fit: cover;
}
.container4 .container-item-img img{
    object-fit: none;
}
.container5 .container-item-img img{
    object-fit: scale-down;
}
.container6 .container-item-img img{
    object-fit: none;
}
.container6 .container-item:nth-child(1) img{
    object-position: 40px 40px;/*pxで指定*/
}
.container6 .container-item:nth-child(2) img{
    object-position: 100% 0;/*右上*/
}
.container6 .container-item:nth-child(3) img{
    object-position: right bottom;/*右下*/
}
.container7 .video {
    height: 150px;
    object-fit: cover;
    width: 100%;
}
.container8 .container-item-img img{
    object-fit: contain;
}
</style>
<h2><a href="https://haikararou.com/ichiriki/20210107/index.html" target="_blank">object-fit: fill;</a></h2>
<div class="container">
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/001.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/002.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/003.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
</div>

<h2><a href="https://haikararou.com/ichiriki/20210107/index2.html" target="_blank">object-fit: contain;</a></h2>
<div class="container container2">
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/001.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/002.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/003.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
</div>

<h2><a href="https://haikararou.com/ichiriki/20210107/index3.html" target="_blank">object-fit: cover;</a></h2>
<div class="container container3">
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/001.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/002.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/003.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
</div>

<h2><a href="https://haikararou.com/ichiriki/20210107/index4.html" target="_blank">object-fit: none;</a></h2>
<div class="container container4">
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/001.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/002.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/003.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
</div>

<h2><a href="https://haikararou.com/ichiriki/20210107/index5.html" target="_blank">object-fit: scale-down;</a></h2>
<div class="container container5">
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/001.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/002.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/003.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
</div>

<h2><a href="https://haikararou.com/ichiriki/20210107/index6.html" target="_blank">object-position</a></h2>
<div class="container container6">
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/004.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/004.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/004.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
</div>

<h2><a href="https://haikararou.com/ichiriki/20210107/index7.html" target="_blank">object-position</a></h2>
<div class="container container7">
    <video class="video" src="https://haikararou.com/ichiriki/20210107/005.mp4" autoplay muted loop width="200" height="auto"></video>
</div>

<h2><a href="https://haikararou.com/ichiriki/20210107/index8.html" target="_blank">IE対応:object-fit-images (object-fit: contain;)</a></h2>
<div class="container container8">
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/001.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/002.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://haikararou.com/ichiriki/20210107/003.jpg" alt="">
        </div>
        <h5>title here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
    </div>
</div>

<script>
    objectFitImages('.container8 .container-item-img img');
</script>