Question

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

高度：汽车;是不好的，因为它与离开高度=“”一样好，它不会给页面提供任何测量信息。

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

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

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

对此有什么解决方案，我很难过。

每个图像位于页面宽度为20％的容器中，形成5列。

Answer 1

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

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

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;

}

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

3 个答案: