将图片宽度设置为最大100%，高度自适应但不小于XX，避免拉伸。

Question

在容器中有一张图像。 图像宽度占100％，高度自动调整。 但我想将高度设置为至少XXX像素，以便在调整容器宽度时，无论如何，图像保持至少某个高度，而宽度增加以保持比例。 我当前的方法存在问题，即容器调整大小后图像尺寸会被扭曲。

<div class="imageHelper">
    <img src="http://farm8.staticflickr.com/7230/7218149614_e0ba252f73_b.jpg" alt="image" />
</div>

.imageHelper {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.imageHelper img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 100%;
    width:auto\9;
    height: auto;
    min-height: 600px;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

我已经设置了Fiddle（http://jsfiddle.net/5JY8c/1/），您可以尝试调整大小并查看为什么当前的方法不起作用。

- Karolis Ramanauskas

---

如果CSS有一个“proportions: fixed”的属性就好了，这对于iframe等元素会很有帮助。 - bjb568

你不能同时设置最大宽度和最小高度并保持纵横比。它们是相互冲突的要求。如果你缩小窗口使其只有50像素宽，那么图像的宽度最多只能是50像素以满足最大宽度属性，并且必须至少600像素高以满足最小高度要求。这将导致图像被拉伸。 - mpen

Answer 1

这篇文章可能会有所帮助：

http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

尤其是这部分内容：

object-fit: cover;
overflow: hidden;

支持CSS3。

更新:正如Mark所建议的，这种方法只适用于现代浏览器:http://caniuse.com/object-fit

- dnl-blkv

---

之前不知道这个CSS属性。它的兼容性几乎不存在，然而可以在这里查看：http://caniuse.com/object-fit - mpen

Answer 2

这是您要找的内容吗？

.imageHelper img {
  position: absolute;
  top: 0%;
  left: 0%;
  max-width: 100%;
  max-height: 100%;
}

点击此处查看示例

您可以更改容器的高度和宽度，图像将始终保持成比例。

- ekhaled

Answer 3

你可以尝试使用 line-height 和 text-align 来居中你的图像。然后，通过负边距，你可以虚拟地减小图像的大小，至少是图像所需的空间。

如果你想让图像宽度为100％和最小高度为600px，这是不连贯的，你需要剪切一些东西，使其保持比例但某些部分被隐藏。垂直或水平。

如果你的图片是内容的一部分，则使用 background-image 的 -position 和 -size 即可。例如，从中心裁剪单个流中的图像：http://codepen.io/gc-nomade/full/fdIxe

.imageHelper {
  height: 600px;
  line-height: 600px;/*set baseline right in vertical middle */
  overflow: hidden;
  text-align:center;/* center image or texte */
}
.imageHelper img {
  margin: -100%;/* reduce virtually to 0 space used by image so it follows from center,  line-height and text-align set in parent  :) */
  vertical-align:middle;/* stands on baseline */
/* keep both height/width flexible */
  min-height:600px;
  min-width:100%;
}

由于这是使用基本的CSS，与旧版浏览器的兼容性应该会提高 :)

- G-Cyrillus