瀏覽器不關心IMG元素的大小

我最近試驗過這個問題;瀏覽器不關心IMG元素的大小

<div class="row"> 
    <div class="column"> 
     <img id="first" width=275 height=385 src="flower-275x385.jpg" /> 
    </div> 
    <div class="column"> 
     <img id="second" width=100 height=400 src="flower-275x385.jpg" /> 
    </div> 
    <div class="column"> 
     <img id="third" width=500 height=150 src="flower-275x385.jpg" /> 
    </div> 
    <div class="column"> 
     <img id="fourth" width=75 height=150 src="flower-275x385.jpg" /> 
    </div> 
    <div class="column"> 
     <img id="fifth" width=750 height=550 src="flower-275x385.jpg" /> 
    </div> 
</div> 

<style> 
    .row { 
     width:100%; 
     overflow:hidden ; 
    } 
    .column { 
     width:20% ; 
     float:left ; 
    } 

    .column img { 
     width:100% ; 
     height:auto ; 
    } 

</style>

在HTML邊有許多不同的尺寸相同的圖像，
但瀏覽器只照顧圖像自然大小的，
這就是爲什麼所有圖像的jsfiddle，
呈現相同的尺寸上的結果側熱到強制瀏覽器照顧基於HTML的寬度/高度？

這裏是它的JSFiddle。

編輯：看來沒有辦法沒有JS：My Solution，謝謝你上面的建議！

來源

2013-02-09 Digerkam

Take the width:100% ; out of your CSS如果您希望標記中指定的尺寸適用。否則，所有圖像的大小將與其容器的寬度相匹配，並且您已將所有容器設置爲相同的寬度。

來源

2013-02-09 14:25:46 robertc

它看起來凌亂，但它會具有相同的「寬度」 – Digerkam 2013-02-09 14:30:07

@Digerkam我不知道您的評論應該是什麼意思？ – robertc 2013-02-09 14:36:46

對不起，我的英文，我的意思是他們看起來很混亂。他們必須在相同的寬度，但不同的高度。 – Digerkam 2013-02-09 14:38:48

如果你想有相同的寬度，但自動計算高度，首先刪除樣式，您已經對圖像應用的高度：

.column img { 
    width:100% ; 
    /*height:auto ;*/ 
}

然後，去掉所有的寬度和高度值的您的圖片：

<img id="first" src="flower-275x385.jpg" />

參見：http://jsfiddle.net/e2jQD/10/

來源

2013-02-09 14:26:07 wxactly

看起來不錯，但你能通過JSFiddle來說明嗎？ – Digerkam 2013-02-09 14:28:28

@Digerkam - 增加了jsfiddle鏈接。 – wxactly 2013-02-09 14:32:12

我見過，但沒有運氣：http://jsfiddle.net/akkara/e2jQD/8/和http://jsfiddle.net/akkara/e2jQD/9/ – Digerkam 2013-02-09 14:35:04

瀏覽器不關心IMG元素的大小

回答

相關問題