CSS图像调整大小失真答案

【问题标题】：CSS image resize distortionCSS图像调整大小失真
【发布时间】：2014-04-10 05:25:43
【问题描述】：

当图像小于 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>

【问题讨论】：

大于800px也会出现失真。
从#gallery .section img中删除min-height:400px;和max-height:800px;

标签： css image resize

【解决方案1】：

这是您的解决方案：

#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”；

祝你好运！

【讨论】：

【解决方案2】：

要保持纵横比，您必须让高度或宽度领先 - 另一个是自动的。

你们的规则互相争斗。

我建议对图像使用包装器。

.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>

【讨论】：

不幸的是......将此代码放入 so-sn-p 会重新排列重要性顺序。 : /