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>

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>

您在那里犯了一些错误：

1. 要使用"高度：100％"，您必须在HTML和身体标签上具有"高度：100％"；
2. 要设置元素的宽度/高度，您必须将其转换为块或内联块;
3. "文本 - 偏心：中心"将以内联元素为中心；中心块使用"保证金：0自动";

祝你好运！