在 CSS 流体布局上保持比例

【问题标题】：maintain proportions on css fluid layout在 CSS 流体布局上保持比例
【发布时间】：2013-11-01 10:48:09
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你可以使用

width:66.67% 和 width:33.33%。

【讨论】：

【解决方案3】：

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

【讨论】：