CSS和圖像大小

我想有一個CSS類和/或解決方案，其中圖像是100％寬度（高度爲自動），但最大自己的大小。無論如何，要實現這一目標，還是我需要指定最大寬度逐個圖像？CSS和圖像大小

2013-08-18 Tom

你試過了什麼？ –

如果你設置：

width: 100%; 
height: auto;

的圖像會作爲更大的作爲它的容器。寬度和高度的比例將保持不變。

如果圖像的寬度低於容器的寬度，那麼它將被縮放，直到它符合可用空間。在這種情況下，你可能想使用：

max-width: 100%; 
height: auto;

來源

2013-08-18 12:44:35 Krasimir

**最大寬度**解決方案對我無效。調整窗口大小時，圖像不會向下重新排列。（**寬度**解決方案沒有給出所需的效果，因爲我不想讓小圖像調整大小/向上縮放） – Tom

（我在任何情況下都提高了答案） – Tom

對不起，但我不能同意你的看法。打開下面的提琴手http://jsfiddle.net/krasimir/VVNDX/1/並縮小到正確的面板。您將看到圖像被調整大小並填充可用空間。第二個圖像是完全一樣的。那裏的容器寬度較低，然後圖像和*最大寬度：100％*也解決了這個問題。換句話說，* max-width：100％*告訴瀏覽器圖像的最大寬度總是等於容器的寬度。 – Krasimir

這應做到：

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

如果窗口比圖像越大，圖像也不會被縮放。如果窗口小於圖像，圖像應該縮放。我注意到你說，它不會在你對克拉西米爾的回答發表評論。您可能需要檢查並查看是否有其他可能會改變此行爲的CSS。

來源

2013-08-18 22:09:00 17cliu

你甚至讀過以前的答案嗎？這與9小時前提出的解決方案相同 –

我知道，我很抱歉。我想評論一下檢查其他CSS，但我沒有足夠的評價！我認爲這可能是一個容器問題，導致您的圖像不能縮放。 – 17cliu

嗨。我認爲你們都是正確的，因爲我已經將解決方案確認爲在我的網站的其他地方工作，所以我最初測試解決方案的地方提出了某種方式，導致該解決方案無法正常工作。（試圖找出現在。） – Tom

CSS和圖像大小

回答

相關問題