圖像自動高度縮放寬度

我有在寬度上，我伸展寬度以適應集裝箱較小某些圖像，但是希望hieght擴大規模爲好，在此先感謝，菲爾圖像自動高度縮放寬度

2014-09-04 P Clegg

代替CSS方法的，可以計算出原始的寬高比，然後，從寬度動態計算投射高度.. – ne1410s 2014-09-04 21:19:22

請包括更多的代碼下次。 – 2014-09-04 21:20:46

我用一個YouTube視頻做了這個，使用瀏覽器和寬度來調整高度。你能適應它的任何東西，但可能有點矯枉過正：https://gist.github.com/dcondrey/647fcdda17cd23715872 – davidcondrey 2014-09-04 21:30:10

有沒有需要指定的高度。

看看我的例子，這是我的jsfiddle

這裏是HTML

<div class="ele"> 
    <img src="http://viralstash.net/wp-content/uploads/2014/03/521013543_1385596410.jpg" border="0" /> 
</div>

這裏是CSS

.ele { 
    outline: red solid 1px; 
    width: 250px; 
} 
.ele img { 
    width: 100%; 
    display: block; 
}

如果您控制父元素的寬度，只需使用with，則無需擔心圖像的寬度和高度值。

圖像它自會使用父母的大小設置它的寬度，默認情況下，高度值將是成正比的寬度，所以沒有必要在所有指定高度值，即使不在父。

2014-09-04 21:25:42 Allan

對不起，圖像高度仍然沒有自動調整大小僅寬度 – 2014-09-04 21:41:31

你檢查我的jsfiddle，其工作在那裏，用它玩，你會看到。也許是你的來源。也許你應該發佈迄今在jsfiddle上的CSS和HTML。 – Allan 2014-09-04 21:44:14

是的，感謝您的例子，但是圖像本身是比任何代碼的高度和寬度，我想要做的是放大圖像，以適應寬度，而且還會自動放大的高度與寬度的比例相同，謝謝。 – 2014-09-05 12:23:47

在你css：

img { 
    width: 100%; 
    height: auto !important; 
}

CSS自然可以處理這個問題。圖像將自動佔用其容器寬度的100％，高度將按比例調整。

2014-09-04 21:11:46

試過這種方法，寬度將非常合適，但高度不會按比例放大：/謝謝。 – 2014-09-04 21:14:40

請用示例代碼創建一個小提琴或codepen，以便我可以調試。你有CSS衝突，因爲這是一個非常基本的CSS事情。 – 2014-09-04 21:15:15

確保添加！important重要聲明（height：auto！important;）以確保跨瀏覽器的兼容性（特別是較舊的broswers，即6,7等）。 – iammikerodriguez 2014-09-04 21:16:57

回答