【CSS】object-fit　テスト実装

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

object-fit: fill;

object-fit: contain;

object-fit: cover;

object-fit: none;

object-fit: scale-down;

object-position

object-position

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

<script type="text/javascript" src="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/ichiriki/20210107/index7.html" target="_blank">object-position</a></h2>
<div class="container container7">
    <video class="video" src="http://haikararou.com/wp/ichiriki/20210107/005.mp4" autoplay muted loop width="200" height="auto"></video>
</div>

<h2><a href="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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="http://haikararou.com/wp/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>

The post 【CSS】object-fit　テスト実装 first appeared on haikararou.