css - 绝对定位的 div 内的图像纵横比

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

width + translate 可能不是最好的方法。

block 和 margin auto 没那么棘手:

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