图像调整大小调整比率

时间:2015-06-09 02:11:02

标签: html css image

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

#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>

1 个答案:

答案 0 :(得分:2)

您无法确定身高和宽度,但保持比率。因此,您应该使用自动高度将宽度保持在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>