スケールと中央の画像

Question

私はHTMLでこれを持っていると私は、容器内部の画像が中央に配置する必要があると私は親のdivのサイズを変更した場合でも

<div class="art-cont" id="art"> 
<div class="art-1"> 
<img src="https://cdn.stocksnap.io/img-thumbs/960w/2SQMYBPQGK.jpg"> 
</div> 
<div class="art-2"> 
<img src="https://cdn.stocksnap.io/img-thumbs/960w/2SQMYBPQGK.jpg"> 
</div> 
<div class="art-3"> 
<img src="https://cdn.stocksnap.io/img-thumbs/960w/2SQMYBPQGK.jpg"> 
</div> 
</div> 

CSSスケールする：

を

.art-cont{ 
    width:100%; 
    height:400px; 
} 
.art-1{ 
    width:70%; 
    height:50%; 
    float:left; 
    position:relative; 
    overflow:hidden; 
    border:2px solid #fff; 
} 
.art-2{ 
    width:30%; 
    height:50%; 
    float:left; 
    position:relative; 
    overflow:hidden; 
    border:2px solid #fff; 
} 
.art-3{ 
    width:100%; 
    height:50%; 
    clear:both; 
    position:relative; 
    overflow:hidden; 
    border:2px solid #fff; 
} 

はここでフィドルです：https://jsfiddle.net/0r7rhe77/

Answer 1

あなたはあなたのコードにこれを追加することによりを求め何を達成することができます

ここ

.art-1 img, .art-2 img, .art-3 img{ 
    max-width:100%; 
    position:absolute; 
    margin:auto; 
    left:0;right:0;bottom:0;top:0; 
} 
.art-2 img{ 
    max-width:inherit; 
    max-height:100%; 
} 

が作業フィドルです：https://jsfiddle.net/0r7rhe77/2/

Answer 2

次のルールは、限り、あなたは、ユーザーのthe browser compatibility of object-fit（およそ90％で大丈夫だとして、それを

.art-cont img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
} 

を行います - IE 11を除いて、ほとんど誰もか低い）。 the other options for object-fitもチェックしてください。

Fiddle

---

すべてのモダンブラウザはbackground-sizeをサポートするよう別のオプションは、background-imageを使用して画像を表示するようにコードをリファクタリングしています。 <img>要素を削除し、代わりに実行します。

.art-1, .art-2, .art-3 { 
    background-image: url(https://cdn.stocksnap.io/img-thumbs/960w/2SQMYBPQGK.jpg); 
    background-size: cover; 
    background-position: center center; 
} 

Fiddle using this approach