html - 如何在不拉伸(stretch)的情况下为图像赋予高度

Question

我有一张分辨率非常高的图片。 我将宽度设置为 100%，效果很好。唯一的问题是它的高度太大，我无法在不拉伸(stretch)图像的情况下给出高度。

这是我的 HTML:

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

CSS:

.div{
  max-height:500px
}
img{
  width:100%;
  height:auto;
  max-height:100%;
}

如何在不拉伸(stretch)图像的情况下给它适当的高度？

Answer 1

你可以试试这个..添加图像而不是内部 div，如果你必须给宽度 100%。

.sq1 {
   height : 300px;width:300px;
  background-color:#eee;position:fixed;
}

.sq2{
  height:200px;width:200px;
  background-color:#000;margin:50px auto;
}

<div class="sq1">
  <div class="sq2"></div>
</div>