製作圖片以適應其父尺寸

Question

我有一些尺寸很大的照片，我想將它們設置爲父級的尺寸大小。如果有一次父級尺寸是1200x800，所以我想將照片尺寸設置爲1200x800，但我也希望看到整個圖片的。如果我的父級維度是500x300，所以我希望圖像爲500x300等等。

這甚至可能嗎？我想縮小圖像或根據父圖像的尺寸展開圖像。

謝謝！

Answer 1

CSS屬性是max-width：

的CSS

img { 
    max-width:100%; 
} 

你可以添加一個容器周圍的圖像，並設置overflow:hidden防止圖像得到比規定的寬度/高度更大。

Answer 2

使用CSS的該位縮放圖像：

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

Answer 3

試試這個圖像標籤

<img src="url.jpg" width="100%" height="100%" /> 

或者設置元素作爲圖像的backgound，做同樣的。要

Answer 4

我可能是天真的，但這不是這麼簡單嗎？

img { 
    width:100%; 
    height:100%; 
} 

Answer 5

嘗試使用MAX-width屬性，這可能會給一個錯誤在早期版本的IE瀏覽器雖然

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