Question

我网站上的图片会调整大小，从而改变他们的比例。如果不在照片编辑器中裁剪图像，我想使图像位置调整大小，以便隐藏溢出。

#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％; width：auto

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

或

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

或者您可以将图像设置为背景大小：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>

图像调整大小调整比率

1 个答案: