html - 在 60%-height-div 中包含图像，同时保持纵横比

Question

我想要完成的事情:
- 创建一个弹出式 div(固定)，以 View 为中心
- 此弹出窗口应为浏览器窗口高度的 60%
- 弹出的内​​容应该是一张图片和图片右上角上方的'x'
- 图像的高度应该是最大的，考虑到它应该与'x'一起包含在div中
- 应保持图像的纵横比

我试过下面的代码

<div class="pop-up">
  <p class="exit-button">x</p>
  <img class="image" src="safari.png" width="1200" height="630" alt="" title="" />
</div>

使用 CSS:

body {
  background: #333;
}
.pop-up {
  position: fixed; 
  height: 60%; 
  width: auto; 
  left:50%; 
  top:50%;
  -webkit-transform:translate(-50%,-50%); 
  transform:translate(-50%,-50%);
  background:yellow;
  object-fit: contain;
}    
.exit-button {
   text-align: right;
   margin: 0;
   font-size: 300%;    
}
.image {
  height: 100%; 
  width: auto;
  opacity:0.7;
}

这段代码没有解决问题，图像不包含在(黄色)div 中，如下面的屏幕截图所示:

http://www.michielvisser.nl/tmp/screenshot.jpg

如何将图片包含在 div 中，并为 div 中的图片设置最大高度并保持宽高比？

---

解决方案 1:从 .pop-up 中删除高度和宽度，并将 .image 中的高度:100% 更改为高度:60vh。这非常有效。显然 child (img)不会适应 parent (div)，但 parent (div)会适应 child (img)。听起来像现实生活。

解决方案 2:本质上，问题出现在调整窗口大小时(Firefox 除外)。解决方案可以是在调整大小后重新绘制图像，这解决了问题:

$(window).resize(function(){
  $('img').hide();
  setTimeout(function(){ $('img').show(); }, 1);
});

Answer 1

您的问题是:

1. 您在图片上设置了内联宽度和高度，这会覆盖该图片的宽度和高度的 CSS 样式
2. X 的边距将图像向下推，因为 X 被包裹在 <p> 中标签。
3. 你不需要object-fit完全没有。

解决#1 的简单方法是从图像标签中删除行内宽度和高度，并将其留给样式表。

数字 2 可以通过将 X 包装在 div 中来解决而不是 p ，或者您可以为其使用伪元素。我在下面的代码片段中采用了后一种方法。

要解决#3，只需从样式表中删除样式。 (在 Safari 中设置这个属性实际上把我搞砸了。)

此代码段已在 Safari 10.1.1 中测试。请注意默认情况下占位符图像非常大 (1000x800)，但它只会根据父 div 显示尽可能大。

编辑:根据您的评论，让我们进一步修改它，以便我们指定图像的大小，并且只让包装占据图像的大小。

所以在我们的图像上，为了让它达到屏幕高度的 60%，我们可以这样做:

img {
  height: 60vh;
  width: auto;
}

然后，在我们的父级中，我们根本不会指定宽度或高度，但我们可以做 display: flex只是为了确保它足够大以容纳其内容。

body {
  background: #333;
}
.pop-up {
  display: flex;
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: yellow;
}
.exit {
  color: black;
  text-decoration: none;
  text-align: center;
  font-size: 300%;
  display: block;
  position: absolute;
  top: -50px;
  right: -40px;
  width: 40px;
  height: 50px;
}
.image {
  height: 60vh;
  width: auto;
  opacity: 0.7;
}

<div class="pop-up">
  <a href="#" class="exit">X</a>
  <img class="image" src="http://placehold.it/1000x800" alt="" title="">
</div>