0

我最近一直在尝试这个问题；

<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：我的解决方案就没有办法做到这一点，感谢上面的建议！

4

2 回答 2

0

width:100% ;如果您希望应用标记中指定的大小，请从 CSS中取出。否则，所有图像的大小都将与其容器的宽度相匹配，并且您已将所有容器设置为相同的宽度。

于 2013-02-09T14:25:46.620 回答
0

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

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

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

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

见：http: //jsfiddle.net/e2jQD/10/

于 2013-02-09T14:26:07.320 回答