CSSで画像を中央線でトリミングする

htmlの組みかたで、外枠になるdivを作ってあげてその中にimgタグを入れる感じになります。

<div class="outerframe"><img src="foo.jpg"></div>

コツは外枠で大きさを指定してあげて、その外枠に対して中身の画像をabsoluteしてあげるところですかね。外枠よりも大きい画像を準備しないと基本おかしなことになりますが、幅を100%で指定しているので、高さを余らせないように注意すればよいです。

.outerframe {
    height: 100px;
    width: 100%;
    overflow: hidden;
    position: relative;
    img {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100%;
        height: auto;
    }
}
Last update: 2017.12.28 (木)