如果寬度為百分比，如何以px為單位設置圖像高度？

Question

如果將圖像的寬度設置為100％，如何插入圖像的高度（在HTML中為height =“”）作為精確的像素圖形？ 我需要所有圖像的高度，以便頁面的其余部分可以正確布局布局。

高度：自動; 不好，因為它與將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

或者您可能需要在將javascript插入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;

}