具有固定高度，自动宽度和保持比率的图像 [英] image with fixed height, width auto and keep ratio

问题描述

我有一个响应式 ul 列表，其中每个 li 都是 ul 宽度的50％.在每个 li 中，我都有一张图片.我希望具有固定的高度和100％的宽度，同时保持图像的比例(例如通过缩放).我该怎么办?

I have a responsive ul list, where each li is 50% of ul width. In each li, I have an image. I want to have a fixed height and a 100% width, keeping the ratio of the image (by zooming for instance). How can I do this please?

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>

推荐答案

如注释中所述，您可以使用

As mentioned in the comment you can either use

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

或者您可以将图片设置为背景

or you can set the image as background

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

这篇关于具有固定高度，自动宽度和保持比率的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！