具有固定高度，宽度自动和保持比例的图像

Question

我有一个响应式ul列表，其中每个li是宽度的012％，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

你需要省略陈述图像的宽度。通过这种方式，所提供图像的高度将调整为所需的262像素高度，其相应的宽度将自动缩小为其对应的原始高宽比。

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