五列网格没有正确缩小

Question

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

在我的例子中，我使用了3种不同的网格尺寸 - grid6，grid8和grid12。 还有一个grid16和grid24，但在这个例子中没有使用它们。

这是我的小提琴：

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，则会根据宽高比自动计算其他属性。在您的小提琴中，所有图像都具有相同的height，但它们在width中有所不同。因此，如果您将其设置为宽度并保留高度，则会自动计算高度，并且由于width和图像的宽高比不同，因此计算的height也会有所不同。

如果您设置图像的高度，那么无论窗口大小如何，高度都将相同，但宽度将自动计算，并且在宽高比方面会有所不同，如此Fiddle。

如果明确设置高度和宽度，则会影响宽高比。