浏览器不关心基于IMG元素的大小 [英] Browser Do Not Take Care Of IMG Element Based Size

问题描述

我最近试过这个问题;

I have been experimented this problem recently;

<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的宽度/高度？

On HTML side there is many different sizes for same image,
But browser only take care of image natural sizes,
This is why all images rendered same size on result side in JSFiddle,
Hot to force browser to take care of HTML based width/height?

以下是 JSFiddle 。

编辑：似乎没有办法没有JS： My Solution ，感谢上面的建议！

It seems there is no way do it without JS: My Solution, thanks for advices above there!

推荐答案

如果您想要使用相同的宽度但自动计算高度，请首先删除您在图像上应用的高度样式：

If you want to have the same width but auto-calculated heights, first remove the style for height that you have applied on the images:

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

然后，

Then, remove all of the width and height values from your images:

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

请参阅： http://jsfiddle.net/e2jQD/10/

这篇关于浏览器不关心基于IMG元素的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！