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 回答