Question

这可能是一个比较简单的问题，但我似乎无法找到答案。

我有以下设置：

.wrapper {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 50%;
  transform: translateX( -50%);
}

img.content {
  height: 100%;
  width: auto;
}

缩小窗口高度时，图像的宽度似乎没有变化。

这是一个快速的JSfiddle来演示这个问题。调整窗口的高度会使图像倾斜或偏移，而不是相应地调整宽度 https://jsfiddle.net/5p82ey8k/

干杯

Answer 1

宽度+翻译可能不是最佳方式。

块和边距自动不那么棘手：

.wrapper {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 0;
  right: 0;
}

.content {
  height: 100%;
  display: block;
  margin: auto;
}

<div class="wrapper">
  <img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="content">
</div>

https://jsfiddle.net/5p82ey8k/2/

Answer 2

如果你想保持图像良好<img/>，你可以尝试这种风格。

img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

这应该保持这个比例。然而，在我看来，更好的解决方案是将img设为background-image，并将其设置为大小，如下所示：

.image {
   width: 100%;
   height: 100%;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

Answer 3

你可以将你的图片实现为背景图片而不是img。并给容器这个样式。

background:url('imgurl') center center no-repeat;
background-size:cover;

通过这种方式，您可以设置background-size属性，该属性允许您让图片始终覆盖容器或包含

about background-size

见工作fiddle.

绝对定位div内的图像宽高比

3 个答案: