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

Question

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

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

我可以获取原始图像的精确像素高度

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

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

有什么解决办法吗，我很困惑。

每个图像都在一个容器中，该容器的宽度为页面的20%，共有5列。

Answer 1

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

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

Answer 2

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

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

Answer 3

在我看来，您似乎需要使用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;
}