Html 具有固定高度、自动宽度和保留比率的图像

我有一个响应的

ul

列表，其中每个

li

是

ul

宽度的50%。 在每个

li

中，我都有一个图像。我希望有一个固定的高度和100%的宽度，保持图像的比例（例如通过缩放）。请问我怎么做

ul{
宽度：100%
}
李{
宽度：50%；
浮动：左；
}
李英明{
高度：262px；
宽度：100%；
}

如评论中所述，您可以使用

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

也可以将图像设置为背景

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

---

您需要省略说明图像的宽度。这样，所提供图像的高度将调整为所需的262px高度，其相应的宽度将自动调整为原始图像的相应纵横比

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

---

尝试将“最大高度”和“最大宽度”与“高度”和“宽度”一起使用，以便

li

需要固定高度和

overflow:hidden

。然后里面的图像就是

宽度：100%

你的图像丢失了不能让你成为一个被剪掉的人，这是完美的重新拍摄！