html - 五列网格未正确缩小

Question

我使用的是最大宽度为 1280 像素的流体网格。 网格的最小宽度为 950px，

在我的示例中，我使用了 3 种不同的网格大小 - grid6、grid8 和 grid12。 还有一个 grid16 和 grid24，虽然在这个例子中没有使用它们。

这是我的 fiddle :

http://jsfiddle.net/dmL7A/

当缩小浏览器窗口时，最小的网格 (grid6) 与其余网格的高度不相等。 Grid6 的高度小于其他网格尺寸。

有没有人以前遇到过这种情况，有没有不使用媒体查询的解决方案？

.grid6_asset,
.grid8_asset,
.grid12_asset,
.grid16_asset{ 
    float:left;
    position:relative;
}
.grid6_asset{
    width:20%;
}
.grid8_asset{
    width:40%;
}
.grid12_asset{
    width:60%;
}
.grid16_asset{
    width:80%;
}
.grid24_asset{
    width:100%;
}

Answer 1

如果您设置 width或 height对于图像，其他属性将根据纵横比自动计算。在您的 fiddle 中，所有图像都具有相同的 height , 但它们在 width 上有所不同.所以如果你设置它的宽度和高度，高度将自动计算并且因为width和图像的长宽比不同，计算height也会有所不同。

如果您设置图像的高度，则无论窗口大小如何，高度都将相同，但宽度将自动计算，并且会根据纵横比而有所不同，如 Fiddle 所示。 .

如果您明确设置高度和宽度，那么宽高比将受到影响。