圖片調整大小調整比率

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％;寬度：自動

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

或

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

或可以設置圖像的背景與背景尺寸：蓋; background-position：center center;

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