html - 具有固定高度、自动宽度并保持比例的图像

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;
}