Question

我正在制作一个＆＃34;灯箱＆＃34;有点效果。如果不使用JavaScript，如何根据视口大小调整灯箱大小，使其始终保持在视口的中心并占据宽度和高度的80％？

<div class="fullscreen-dim">
    <div class="dialog">
        <img src="http://placehold.it/300x200">
        <a class="close-button" href="#">CLOSE</a>
    </div>
</div>

.fullscreen-dim {
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0; right: 0;
    width: 100%;
    height: 100%;
}
img {
    width: 100%;
    height: 100%; // how to respect aspect ratio??
}
.dialog { // dialog should auto-size just big enough to wrap image
    padding: 20px; // to create a "border" around the image;
    position: fixed;
    background-color: red;
    left: 50%; top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 80%;
    height: 80%;    
}
a {
    position: absolute;
    bottom: 5px; right: 5px;
}

在此方法http://jsfiddle.net/3Lohtes9/中，对话框会调整大小，但图像不符合宽高比。

这个问题也可以解释为＆＃34;祖父母div＆＃34;关于SO的问题。如何根据full-screendim设置图像大小，让对话框自动调整大小以适应？

编辑：我没有将img包含在对话框div中，而是可以achieve a similar visual effect在图像周围设置边框，并在视口大小更改时仍然相应地调整图像大小。但是，我现在无法放置关闭按钮。有什么建议吗？

Answer 1

将.dialog高度从80％更改为自动。 See fiddle

    .fullscreen-dim {
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
img {
    width: 100%;
    height: 100%;
}
.dialog {
    padding: 20px;
    // to create a"border" around the image;
    position: fixed;
    background-color: red;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 80%;
    height: auto;
}
a {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

修改

尝试添加此项，如果您想要更多控制（如最小高度）或只是从.dialog中删除所有高度和宽度：

width: auto; max-width:80%; height:auto; max-height:80%; min-height: 100px;

new fiddle

Answer 2

使用this问题中的信息，您可以将图像设置为在灯箱内水平对齐。然后通过删除图像的高度，它将使用宽高比正确缩放。

关键的CSS更改在这里

img {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}
/* This is a new element, see the question linked above. */
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.dialog {
    padding: 20px; // to create a "border" around the image;
    position: fixed;
    background-color: red;
    left: 50%; top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 80%;
    height: 80%;    
    white-space: nowrap;

    text-align: center; margin: 1em 0;
}

和HTML

<div class="fullscreen-dim">
    <div class="dialog">
        <span class="helper"></span>
        <img src="http://placehold.it/300x200"/>
        <a class="close-button" href="#">CLOSE</a>
    </div>
 </div>

请参阅小提琴：http://jsfiddle.net/3Lohtes9/7/

Answer 3

而不是所有这一切

.dialog { // dialog should auto-size just big enought to wrap image padding: 20px; // to create a "border" around the image; position: fixed; background-color: red; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 80%; height: 80%; }

试

.dialog { // dialog should auto-size just big enought to wrap image padding: 20px; // to create a "border" around the image; position: fixed; background-color: red; left: 10%; top: 10%; right: 10%; bottom: 10% }

如何根据祖父母div设置CSS图像宽度

3 个答案: