将图像放入 div 元素并保持其比例

Question

HTML :

<div id="presentationViewContainer">
    <img id="presentationView" />
</div>

CSS :

#presentationViewContainer {
  display: none;
  position: absolute;
  width: 530px;
  top: 106px;
  left: 28px;
  box-shadow: 0px 0px 5px 4px rgb(75, 80, 86);
}

#presentationView {
  max-height:100%;
  max-width:100%;
}

图片为竖屏时的实际结果： 图片高度过大。

图片为竖屏时的期望结果： 图片应该在红色正方形内，以便查看整张图片。

图片为横屏时的实际结果： 图片应该居中。

图片为横屏时的期望结果： 图片应该居中。

JSFIDDLE :

竖屏模式下： https://jsfiddle.net/8e1p351u/ 横屏模式下： https://jsfiddle.net/n9b8q82o/

更新：

现在的实际结果如下：

我该如何将图片定位到红色正方形内？

- wawanopoulos

---

有问题吗？还是我没看到问题？ - Andrew

Answer 1

使用CSS3的新规则，这很容易实现：

.container img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .container img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}

如果您关心旧浏览器，flexbox（弹性盒子）可能对您不起作用，很多情况下翻译方法也不适用。如果这对您非常重要，您可以给您的图像指定尺寸并执行以下操作：

.container img{
  width: 400px;
  height: 300px;
  margin: -150px 0 0 -200px;
  position: absolute;
  top:50%;
  left:50%;
}

- Vandervals

---

你知道怎么给图片添加一个边框吗？（围绕在图片周围） - wawanopoulos

@wawanopoulos 你试过使用 border 或 border-image 吗？ - Vandervals

Answer 2

你可以放弃使用容器，像这样实现：

编辑： 这适用于横向和纵向，并且是响应式的。基本上它适用于任何容器。在这种情况下，容器只是高度和宽度都为100％的body。不要忘记你的css重置！

html,
body {
  height: 100%;
  width: 100%;
}
* {
  margin: 0;
  padding: 0;
}
#presentationView {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  display: block;
}

<img id="presentationView" src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Tour_Eiffel_3c02660.jpg" />

- schliflo

---

或者也许只需使用flex？ - mehulmpt

浏览器支持怎么样？ - schliflo

从你的代码角度来看，IE怎么样？:P transform - mehulmpt

支持转换的浏览器为IE9 － 对于Flex则是IE10。 https://developer.mozilla.org/en-US/docs/Web/CSS/transform https://developer.mozilla.org/en/docs/Web/CSS/flex - schliflo

Answer 3

你想为容器设置一个高度。

更新的Fiddles: 竖屏 - 横屏

#presentationViewContainer {
  position: absolute;
  width: 530px;
  top: 0;
  left: 0;
  
  height: 100%;
    border: blue dashed 1px;
}

#presentationView {
  max-height:100%;
  max-width:100%;
    box-shadow: 0px 0px 5px 4px rgb(75, 80, 86);
}
img{
  border : red solid 3px;
}

<div id="presentationViewContainer">
 <img id="presentationView" src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Tour_Eiffel_3c02660.jpg" />
</div>

此外，这里有三个关于图像魔法居中且不拉伸的实验：

使用常规CSS

使用object-fit：contain（不支持任何版本的IE）

使用Flexbox

- Jeremy Thille

---

我测试了你的代码。请看我在帖子中的更新。图片很好，但位置不好（在左上角）。我想把位置设置在红色正方形上。你能帮我吗？ - wawanopoulos

你点击了我最近的两个链接吗？那个神奇的居中实验？ - Jeremy Thille

是的，它确实有。我已经更新了上面的示例并添加了红色边框。 - Jeremy Thille

我在代码中使用了object-fit:contain选项。我创建了这个jsfiddle：http://jsfiddle.net/eh759oLo/ 你可以看到图片边框没有围绕着图片设置。如何使用object-contain属性来实现呢？ - wawanopoulos

啊，这不一样。object-fit对我来说是新的，我注意到它的行为很奇怪：图像在内部被重新调整大小...所以边框实际上是在图像周围，但像素在图像本身内部绘制...确实非常令人不安。如果你想要一个图像周围的边框，你将不得不使用object-fit之外的另一种方法。 - Jeremy Thille