CSS图像调整大小失真

Question

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

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>