異なるデスクトップとモバイルビューの画像のサイズ変更

Question

私は、デスクトップビューとモバイルビューの両方に、それぞれ高さが固定された以下のような画像しかない構造を持っています。モバイルビュー画像において

延伸出てきます。 私は画像が上、下、左、右のいずれかから切り取られ、私の場合は欲しくない解決法をいくつか適用しました。 どのような視点で画像が伸びないように進めるべきですか？

Answer 1

、あなたは常にそれを引き伸ばすことなく、かつ持つ要素を埋める画像を作るbackground-image/background-sizeを使用して、この

background: url(...) no-repeat;  /* the shorthand property */ 
background-size: cover; 
background-position: center center; 

cover値のようにそれを設定することができます（あなたのイメージのように）固定レイアウトにしたいと仮定すると、 background-positionあなたは画像を中央に配置するか、左、右、下は、トップが揃っ制御することができます

div { 
 
    height: 200px; 
 
    width: 500px; 
 
    background: url(http://lorempixel.com/300/400/animals/4) no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    border: 1px solid black; 
 
} 
 
div ~ div { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
div ~ div ~ div { 
 
    height: 500px; 
 
    width: 200px; 
 
    background-position: left center; 
 
}

<div></div> 
 
<div></div> 
 
<div></div>

クロップしたくない場合は、代わりにbackground-size: containを使用できます。

div { 
 
    height: 200px; 
 
    width: 500px; 
 
    background: url(http://lorempixel.com/300/400/animals/4) no-repeat; 
 
    background-size: contain; 
 
    background-position: left bottom; 
 
    border: 1px solid black; 
 
} 
 
div ~ div { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
div ~ div ~ div { 
 
    height: 500px; 
 
    width: 200px; 
 
}

<div></div> 
 
<div></div> 
 
<div></div>

更新背景サイズを有するimg

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
img { 
 
    height: 40%; 
 
    width: auto; 
 
}

<img src="http://lorempixel.com/200/400/animals/4" alt=""> 
 
<img src="http://lorempixel.com/300/300/animals/4" alt=""> 
 
<img src="http://lorempixel.com/400/200/animals/4" alt="">