Question

我想要完成的任务：
- 创建一个弹出div（固定），以视图为中心 - 此弹出窗口应为浏览器窗口的60％高度 - 弹出窗口的内容应该是图像和＆＃39; x＆＃39;在图像的右上角上方
- 图像的高度应该是最大的，考虑到它应该包含在div中以及＆＃39; x＆＃39;
- 应保持图像的纵横比

我尝试了以下代码

<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。这非常有效。显然，孩子（img）不会调整为父（div），但父（div）将调整为孩子（img）。听起来像现实生活。

解决方案2：基本上在调整窗口大小时会出现问题（firefox除外）。解决方案可以是在调整大小后重绘图像，这解决了问题：

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

Answer 1

你的问题是：

您的图片上设置了内嵌宽度和高度，这会覆盖该图片上宽度和高度的CSS样式
由于X包裹在<p>标记中，因此X的边距会将图像向下推。
您根本不需要object-fit。

解决＃1的简单方法是从图像标记中删除内联宽度和高度，并将其保留在样式表中。

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

要解决＃3，只需从样式表中删除样式即可。（在Safari中设置此属性实际上对我来说很糟糕。）

此代码段在Safari 10.1.1中进行了测试。请注意默认情况下占位符图像非常大（1000x800），但它只显示父div的大小。

修改：根据您的评论，让我们进一步修改，以便我们决定图片的大小，然后让包装器占用图片的大小。

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我将图片放在P标签上方，并将一些CSS添加到.exit-button和.image

从这里，您可以调整元素的填充和大小。

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 {
   position: absolute;
   text-align: right;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: 0;
   font-size: 300%;    
}
.image { 
  height: 100%;
  width: auto;
  opacity:0.7;
}

<div class="pop-up">
  <img class="image" src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/safari-icon.png" width="1200" height="630" alt="" title="" />
  <p class="exit-button">x</p>   
</div>

Answer 3

我复制了你的代码并进行了编辑。请告诉我这是否是您想要的输出。

body {
  background: #333;
}
.pop-up {
  position: fixed; 
  height: 60%; 
  width: auto; 
  left:50%; 
  top:50%;
  padding-top: 30px;
  -webkit-transform:translate(-50%,-50%); 
  transform:translate(-50%,-50%);
  background:yellow;
  object-fit: contain;
}    
.exit-button {
  margin-top: -50px;
  text-align: right;
  margin-right: 0;
  font-size: 300%;    
}
.image {
  margin-top: -20px;
  height: 100%; 
  width: auto;
  opacity:0.7;
}
<div class="pop-up">
  <p class="exit-button">x</p>
  <img class="image" src="safari.png" alt="" title="" />
</div>

Answer 4

由于需要在给定大小的图像对齐中进行硬编码或处理奇怪的卷积，我相信这是最好的方法：

创建占据整个屏幕的固定叠加层，创建高度为60％的容器，将其与Flexbox对齐，并将图像粘贴在内部，使其占据整个高度。宽高比将自动更新（仅适用于height）。

至于按钮 - 给它绝对定位和右边位置为0，并手动给出父相对定位（这是必要的）。

<div id="popup">
  <div id="container">
    <a href="">X</a>
    <img src="https://i.redd.it/gelilvo30mgz.jpg">
  </div>
</div>

html,
body {
  height: 100%;
}

#popup {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  position: relative; !important // has to be specified for the children (anchor) to find the bound
  height: 60%;
  background: #333;
}

a {
  right: 0;
  position: absolute;
}

img {
  height: 100%;
}

https://jsfiddle.net/L2nLjjxc/1/

如果你希望它是动态的，我相信这是最少量的卷积。

包含60％-height-div中的图像，同时保持纵横比

4 个答案: