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>

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?

Here is the JSFiddle of it.

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

回答1:

Take the width:100% ; out of your CSS if you want the sizes specified in the markup to apply. Otherwise all the images will be sized to match the width of their containers, and you've set all the containers to be the same width.

回答2:

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" />

See: http://jsfiddle.net/e2jQD/10/

来源：https://stackoverflow.com/questions/14789049/browser-do-not-take-care-of-img-element-based-size

标签

html

css

image

responsive-design