画像の高さが画像の幅を超えている場合は、画像の上下を上下に切り抜いて中央の画像をCSSでのみ可能ですか？

Question

イメージ要素の高さと幅があらかじめわかっていない場合、イメージの高さがイメージの幅よりも大きい場合は、イメージの幅を同じに切り取ってイメージの中心を垂直に合わせたいとします。新しい画像の高さが画像の幅と一致するように、ピクセルがその頂部および底部を形成する。たとえば、画像の幅が200px、高さが250pxの場合は、上端と下端から25pxを切り取ります。

ここでは例のセットアップです：

HTML：

<div class = 'cell'> 
    ... 
    <div class = 'image_container'> 
    ... 
    <img ...> 
    </div> 
</div> 

CSS：

.cell { 
    display: inline-block; 
    float: left; 
    /* width will be changed by use of '@media screen'. 
     Smaller browser window -> larger width */ 
    width: 31%; 
} 

.image_container { 
    position: relative; 
    float: left; 
    width: 100%; 
} 

.image_container > img { 
    width: 100%; 
} 

のみCSSを使用して前述のセンター/クロップ操作を実現することが可能であり、あるいはそれが必要であるが、これにjavascript/jqueryを使用するには？

Answer 1

object-fit CSS属性を使用できます。それはbackground-size属性のように多く働きます。

.image_container > img { 
    object-fit: contain; 
} 

これは（2016年10月）今のようにフルブラウザをサポートしていませんので、あなたはdiv要素の背景として画像を設定し、代わりにこれに対処するためbackground-positionとbackground-sizeを使用してに見てみたいことがあります<img>タグのCSSで

.image_container { 
 
    height: 300px; 
 
    background-color: cornflowerblue; 
 
    image-rendering: pixelated; 
 

 
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALklEQVQoU2NkgID/UBqdYmSESoJobOA/sgKQKTCFMDaKAuqYAHMs3CqiHInXmwDZGBMDEmk6SQAAAABJRU5ErkJggg=='); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: 200px; 
 
}

<div class="image_container"></div>

Answer 2

.cover_image { 
 
    height: 400px; 
 
    background: url('http://lorempixel.com/g/400/200/') no-repeat scroll center center; 
 
    background-size: cover; 
 
}

<div class="cover_image"></div>