從數據庫中獲取圖像並將其放入html標籤中

Question

我從數據庫中提取圖像，並希望將此圖像放入div標籤中或放入div標籤中，而不會拉伸圖像。所有圖像都是不同的大小，所以我不能使用width和height圖像屬性，因爲當我使用它時，圖像正在拉伸。

<div style="width:300px; height:300px;"> 
    <img src="link.jpg" alt="jet"> 
</div> 

Answer 1

使用此CSS

img { 
    max-width:100% 
} 

EXAMPLES

你有兩個選擇，如果你不能得到你想要在適當大小的圖像，記住大小調整瀏覽器導致的圖像到性能問題。

Answer 2

試試這個：設置max-width圖像和width自動。

HTML：

<div> 
    <img src="link.jpg" alt="jet"> 
</div> 

CSS：

img 
{ 
    width:auto; 
    max-width:300px; 
} 

這裏是一個DEMO。

它應該工作！ 感謝

Answer 3

試試這個：

img 
{ 
    width: 100%; 
    max-width: 300px; 
} 

Answer 4

不要指定圖像標籤widht和高度，但使用的CSS是這樣的：

爲最大300像素的一定寬度可變高度：

img { 
    width: 300px; 
    max-width: 100%; 
    height: auto; /* needed for some browsers to keep the proportions */ 
} 

對於常量高度最大300像素的和可變寬度：

img { 
    height: 300px; 
    max-height: 100%; 
    width: auto; /* needed for some browsers to keep the proportions */ 
} 

如果希望圖像以適合容器（不大於容器較大的寬度或高度）和按比例縮放時，可以使用：

img { 
    height: auto; 
    width: auto; 
    max-height: 100%; 
    max-width: 100%; 
    margin: auto; /* optional, to center horizontally/vertically */ 
} 

這將使圖像最大300px寬/高，不失真和不大於容器。