Question

我的图像具有非常高的分辨率。我将宽度设置为100％，它工作正常。唯一的问题是它的高度太大，我无法在不拉伸图像的情况下达到高度。

这是我的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%;
}

如何在不拉伸图像的情况下给出合适的高度？

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>

Answer 2

/* css */
    div{
      height:500px;
      width: 100%;
    }
    img{
      width: auto;
      height: auto;
    }

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

Answer 3

好的，您的代码中存在一些缺陷。

.div选择器选择class =＆＃34; div＆＃34;。您想使用.container选择器
您忘了关闭max-height：500px with a;
最后您回答的问题是：您的图片仍以原始尺寸显示。这是因为你没有设置溢出：隐藏;通过添加此行，图像不会显示在.container div之外。

我试图尽可能贴近原帖。请记住，您正在切断图像的一部分，这可能会导致不良后果。

<强> HTML

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

<强> CSS

.container{
  max-height:500px;
  overflow: hidden;
}
img{
  width:100%;
}

如何在不拉伸的情况下为图像赋予高度

3 个答案: