包含 60% 高度 div 的图像，同时保持纵横比

我想完成的：
- 创建一个弹出式div(固定(，在视图中
居中 - 此弹出窗口应为浏览器窗口
的 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。这非常有效。显然，子项 (img( 不会适应父项 (div(，但父项 (div( 会适应子项 (img(。听起来像现实生活。

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

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

你的问题是：

您在图像上

设置了内联宽度和高度，这将覆盖该图像上宽度和高度的 CSS 样式
的边距将图像向下推，因为 X 被包裹在<p>标签中。
你根本不需要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>

我将图像放在P标签上方，并在.exit-button和.image中添加了一些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 {
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>

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

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>

因为要么需要在给定大小的情况下硬编码图像的对齐方式，要么处理奇怪的卷积，我相信这是最好的方法：

创建一个占据整个屏幕的固定叠加层，创建一个 60% 高度的容器，将其与弹性框对齐在中心，然后将图像粘贴到里面，使其占据整个高度。纵横比将自动更新(仅在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/

我相信，如果你想让它是动态的，这是最少的卷积。

相关内容

最新更新

热门标签：