html - Image Resizing 调整比例

Question

我网站上的图片会调整大小，从而改变它们的比例。在不在照片编辑器中裁剪图像的情况下，我想调整图像位置并调整大小以 overflow hidden 。

#menugallery img {
width: 100%%;
height: 400px;  
overflow: hidden;
}

这是 HTML:

<li>
                <a href="#">
                    <img src="img/menuimages/burrito.png">
                    <p class="menucaption">Burritos</p>
                </a>
            </li>

Answer 1

您不能同时固定高度和宽度，只能保持比例。因此，您应该将宽度保持在 100% 并使用高度自动。或者高度:100%；宽度:自动

#menugallery img {
  display: block;
  width: 100%;
  height: auto;  
  overflow: hidden;
}

或

#menugallery img {
  display: block;
  width: auto;
  height: 100%;  
  overflow: hidden;
}

或者您可以使用 background-size: cover; 将图像设置为背景；背景位置:中心中心；

#menugallery img_holder {
  display: block;
  height: 100%;
  width: 100%;
  background-position: center center;
  background-size: cover;
}

<div id="menugallery">
   <div class="img_holder" style="background-image: url('img.jpg');"></div>
</div>