Question

当图像小于400像素时，图像会按比例调整大小，并以400像素垂直停止缩放，但宽度会继续缩放（从而扭曲图像）。有没有什么办法解决这一问题？任何帮助将不胜感激。

CSS：

#gallery{
    height:100%;
    min-height:400px;
    max-height:800px;
    min-width:400px;
    text-align:center;
    width:100%;
}
#gallery .section {
    height:80%;
    min-height:400px;
    max-height:800px;
}
#gallery .section img{
    height:100%;
    min-height:400px;
    max-height:800px;
    width:auto;
}

HTML：

<div id="gallery">
    <div class="section">
        <img src="images/1.jpg" alt="">
    </div>
</div>

Answer 1

要保持纵横比，你必须让高度或宽度超前 - 而另一个是自动。

你的规则互相争斗。

我建议使用图片包装。

.image-w {
  max-width: 200px;
}

.image-w img {
  display: block;
  /*for many reasons - but mainly to get rid of the little margin-bottom that happens by default */
  width: 100%;
  height: auto;
}

<div class="image-w">
  <img src="http://placehold.it/400x400" alt="" />
</div>

Answer 2

以下是您的解决方案：

#gallery {}

#gallery .section {}

#gallery .section img {
  display: block;
  max-width: 100%;
  height: auto;
  min-height: 400px;
  max-height: 800px;
}

<div id="gallery">
  <div class="section">
    <img src="http://www.digitaltrends.com/wp-content/uploads/2013/04/Samsung-Galaxy-6-3-sample-image-3.jpg" alt="">
  </div>
</div>

你在那里犯了一些错误：

要使用“height：100％”，您必须在html和body标签上使用“height：100％”;
设置元素的宽度/高度，您必须在块或内联块中转换它;
“text-align：center”将内联元素居中;中心块使用“margin：0 auto”;

祝你好运！

CSS图像调整大小失真

2 个答案: