css - 在 CSS 流体布局上保持比例

Question

我已经以百分比设置布局，但我的 div 包含需要保持比例的图像。例如，我计算过保持 2 : 1 所以宽度 = 300 像素，高度 = 150 像素。

我怎么能只用css做到这一点？我可以读取百分比并将其除以 2 吗？

Answer 1

为了使图像保持比例，只需要定义一个维度。

因此，如果您将宽度设置为 300 像素，高度设置为自动，它将保持比例。

Answer 2

您可以使用

width:66.67%和width:33.33%。

Answer 3

您不能使用图像的百分比，就好像您以百分比定义图像宽度一样，它将缩小到它的父 div 宽度。因此，您必须按比例定义图像的宽度（以像素为单位），因为您希望原始图像大小成比例。但是，如果您想按比例划分 div 的宽度，则可以使用百分比。为了使图像成比例，只需定义宽度而不是高度，这将使图像与原始大小成比例。