如果宽度是百分比，如何以 px 为单位设置图像高度？答案

【问题标题】：How to set image height in px if the width is a percentage?如果宽度是百分比，如何以 px 为单位设置图像高度？
【发布时间】：2015-06-12 10:50:58
【问题描述】：

如果我将图像的宽度设置为 100%，如何将图像的高度（在我的 HTML 中为 height=""）插入为精确的像素图？我需要所有图像的高度，以便页面的其余部分可以正确地构建布局。

高度：自动；不好，因为它就像将 height="" 留空一样好，它不会向页面提供任何测量信息。

我可以抓取原始图像的确切像素高度

style="height:<?=$image_height[1]?>px;"

但是一旦按宽度调整大小，它就不再成比例了，所以原来的高度值就没有用了。

有什么办法可以解决这个问题吗？

每张图片都位于页面宽度 20% 的容器中，共 5 列。

【问题讨论】：

如果您找不到合适的答案，我建议在这个问题上附加一个 jsfiddle 以更好地展示它。

标签： javascript php css

【解决方案1】：

在我看来，您需要使用 css 属性 min-height

或者您可能需要在将图像插入 dom 后，使用 javascript 动态计算图像的高度与宽度的比例。

示例：

function calculateImageHeight (imageId) {

  var image = document.getElementById(imageId);

  // assuming you want the height to be 50% the width
  return image.width * 0.5;

}

【讨论】：

【解决方案2】：

您可以使用此 css 代码设置所有图像的实际像素。

img{
   width: 100%;
   height: auto;
  overflow: hidden;
}

【讨论】：

【解决方案3】：

只需将高度（并将宽度保留为自动）设置为百分比并将容器设置为固定高度，这样您的其余布局就可以了。然后图像的宽度将相应调整（响应）

另一种解决方案是使用填充来保持图像/视频的纵横比，如果需要，我也可以添加此解决方案

【讨论】：

该页面由 5 列 (20%) 组成，具有固定高度的列看起来不整齐和平行。对不起，我不太明白，我不确定你所说的使用填充作为解决方案是什么意思
@GoldenGonaz，那么看来我误解了，你提到设置高度自动会破坏其余布局，因为高度会改变，所以我建议这样做。在另一种情况下，只需使用溢出：隐藏在容器中以隐藏任何额外的图像高度