Question

我在img对象中有一个div对象。我想设置img（或div）的宽度，并将其高度自动设置为保留图像原始比例所需的任何高度。

假设我将宽度设置为200px，这比图像的自然宽度短。当我这样做时：

HTML

<div id="container">
  <img id="foo" src="foo.png">
</div>

CSS

#foo{
  width: 200px;
}

或

#container{
  width: 200px;
}

img的高度设置为保留原始比率所需的高度，但外部div的高度设置为内部图像的自然高度，顶部和底部边距插入内部img和外部div。

我希望外div的高度为保持img的原始比率所需的任何高度，以便div和img之间的上下边距保持不变会变成零。我怎么能这样做？

Answer 1

试试此代码

<强> DEMO

<div class="container">
   <img src="demo.jpg" alt="" />
</div>

body{
    margin: 0;
}
.container{
    width: 200px;
    border: 1px solid red; //tmp added to check the height of container
}

.container img{
    display: block;
    width: 100%;
}

Answer 2

使用此功能：

 <script type="text/javascript">
 function resizeHeight(){
 var resizedImage = document.getElementById('foo');
 resizedImage.style.height = (resizedImage.style.height * 200)/resizedImage.style.width;
 resizedImage.style.width = '200px';
 }
 </script>

将图像行编辑为：

 <img id="foo" src="foo.png" onload="resizeHeight()">

应自动将图片宽度设置为200，并按比例调整高度。

如何自动设置容器高度保持比例

2 个答案: