CSS圖像調整大小失真

Question

當圖像小於400像素時，圖像將按比例調整大小，並在400px處停止垂直縮放，但寬度將繼續縮放（從而扭曲圖像）。有沒有什麼辦法解決這一問題？任何幫助將不勝感激。

CSS：

#gallery{ 
    height:100%; 
    min-height:400px; 
    max-height:800px; 
    min-width:400px; 
    text-align:center; 
    width:100%; 
} 
#gallery .section { 
    height:80%; 
    min-height:400px; 
    max-height:800px; 
} 
#gallery .section img{ 
    height:100%; 
    min-height:400px; 
    max-height:800px; 
    width:auto; 
} 

HTML：

<div id="gallery"> 
    <div class="section"> 
     <img src="images/1.jpg" alt=""> 
    </div> 
</div> 

Answer 1

這裏是您的解決方案：

#gallery {} 
 

 
#gallery .section {} 
 

 
#gallery .section img { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
    min-height: 400px; 
 
    max-height: 800px; 
 
}

<div id="gallery"> 
 
    <div class="section"> 
 
    <img src="http://www.digitaltrends.com/wp-content/uploads/2013/04/Samsung-Galaxy-6-3-sample-image-3.jpg" alt=""> 
 
    </div> 
 
</div>

你已經犯了一些錯誤有：

1. 要使用「height：100％」，您必須在html和body標籤上使用「height：100％」;
2. 要設置元素的寬度/高度，您必須將其轉換爲塊或內嵌塊;
3. 「text-align：center」將以內聯元素爲中心;到中心塊使用「margin：0 auto」;

祝你好運！

Answer 2

爲了保持你要讓高度或寬度鉛長寬比 - 和其他被自動。

你的規則是互相爭鬥。

我建議使用圖像的包裝。

.image-w { 
 
    max-width: 200px; 
 
} 
 

 
.image-w img { 
 
    display: block; 
 
    /*for many reasons - but mainly to get rid of the little margin-bottom that happens by default */ 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="image-w"> 
 
    <img src="http://placehold.it/400x400" alt="" /> 
 
</div>