固定高さ、幅自動および維持率の画像

Question

私は応答性のulリストを持っています。ここで、それぞれliはulの50％です。 それぞれliには画像があります。私は固定された高さと100％の幅を持ち、画像の比率を維持したい（例えばズームなど）。どうすればいいですか？

ul { 
 
    width: 100% 
 
} 
 
li { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
li img { 
 
    height: 262px; 
 
    width: 100%; 
 
}

<ul> 
 
    <li> 
 
    <img src="aa.jpg"> 
 
    </li> 
 
    <li> 
 
    <img src="bb.jpg"> 
 
    </li> 
 
</ul>

Answer 1

あなたは

li { 
overflow: hidden; 
height: 262px; 
} 
li img { 
width: 100%; 
} 

を使用するか、またはあなたが述べ省略する必要がある背景

li { 
height: 262px; 
background: url(image.png) center center no-repeat; 
background-size: cover; 
} 

Answer 2

として、あなたが画像を設定することができますコメントで述べたように画像の幅。この方法で供給される画像の高さは、希望の262pxの高さにリサイズされ、対応する幅は自動的に元の画像の対応するアスペクト比に縮小されます。

ul { 
    width: 100% 
} 
li { 
    width: 50%; 
    float: left; 
} 
li img { 
    height: 262px; 
}