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%);
}

我设置了小提琴（http://jsfiddle.net/5JY8c/1/），您可以尝试调整大小并查看当前方法无效的原因。

Answer 1

本文可能会有所帮助：

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

特别是这一部分：

object-fit: cover;
overflow: hidden;

使用CSS3。

UPD：正如Mark建议的那样，此方法仅适用于现代浏览器：http://caniuse.com/object-fit

Answer 2

这就是你追求的吗？

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

See example here

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

Answer 3

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

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

如果您的图片是您内容的一部分，则如果只是装饰，则background-image -position＆amp; -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，因此应增加与旧版浏览器的兼容性：）

图像最大宽度：100％，高度：自动但高度不小于XX而不会拉伸

3 个答案: