Html 浏览器不考虑基于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>

.行{
宽度：100%；
溢出：隐藏；
}
.栏目{
宽度：20%；
浮动：左；
}
.img列{
宽度：100%；
高度：自动；
}

在HTML端，同一图像有许多不同的大小，
但浏览器只考虑图像的自然大小，
这就是为什么所有图像在JSFIDLE的结果端呈现相同大小的原因，
是否要强制浏览器处理基于HTML的宽度/高度

这是它的名字

---

编辑：似乎没有JS:就无法完成，感谢上面的建议

如果希望应用标记中指定的大小。否则，将调整所有图像的大小以匹配其容器的宽度，并且您已将所有容器设置为相同的宽度。

如果希望具有相同的宽度但自动计算的高度，请首先删除已应用于图像的高度样式：

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

然后，从图像中删除所有宽度和高度值：

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

---

请参阅：

它看起来很凌乱，但它的“宽度”相同@Digerkam我不确定你的评论是什么意思？对不起，我的英语很凌乱，我的意思是它们看起来很凌乱。它们必须具有相同的宽度，但高度不同。@Digerkam那么为什么在标记中指定不同的宽度呢？更改图像纵横比的唯一方法是指定宽度和高度，如果使用的图像的宽度和高度都相同，强制它们具有相同的宽度也将强制它们具有相同的高度values@Digerkam-添加了JSFIDLE链接。我看到了，但没有运气：这些图像有相同的高度，但在HTML端可以看到许多不同的大小。因此，我需要根据给定的HTML宽度/高度值来显示图像，而不是根据图像本身的自然大小。如果对我链接的JSFIDLE中的每个图像使用不同的图像src，它们都将自动应用正确的高度值。