修復圖像大小而無需重新調整尺寸

Question

我有一個寬度爲500px的Div;和高度：170px;

該Div包含一個jQuery的幻燈片，從我的數據庫中獲取隨機圖像和diaplsys它們。問題在於圖像是由用戶上傳的，可以是任何寬高比/任何大小。我需要圖像以適應div，而不用使用img style ='height：x;寬度：X;

基本上希望所有圖像能夠以正確的方式正確顯示，並且具有極高的質量。

我不想，因爲它們作爲顯示在網站的其他部分的全尺寸/質量

可以在任何提供解決方案，以限制其圖像的尺寸可以上傳？

Answer 1

您可以使用css來設置幻燈片中圖像的大小，而不必改變圖像的高寬比。

-set the height of the image to the height of the slideshow container

-make the width auto so its maintains its aspect ratio

-set a max-width so it doesn't get wider than the slideshow

slideshow.img{ 
    height:170px 
    width:auto;/*maintain aspect ratio*/ 
    max-width:500px; 
} 

注意如果原來的尺寸小的圖像可能會比幻燈片渺茫。

Answer 2

驗證正在提交到數據庫的圖像。

Answer 3

你應該可以使用CSS的max-width屬性。如果你這樣做，你不想指定寬度或高度。

你的HTML：

<div id="yourContainer"> 
    <img src="imagePath" /> 
</div> 

而且你的CSS：

#yourContainer { 
    width: 500px; 
    height: 170px; 
} 

#yourContainer img { 
    max-width: 100%; 
    max-height: 100%; 
} 

這不會居中圖像的容器內，但應把工作給你做。

Answer 4

我已經找到了如何實現圖像尺寸保持縱橫比和一段簡單的CSS代碼如下居中圖像：

width: auto !important; /*Keep the aspect ratio of the image*/ 
height: 140px !important; 
margin: 0 auto 1em auto; /*Center the image*/ 

希望這有助於有人:)