Question

我正在尝试在黑暗的背景上创建一个框来显示内容上的图片（正如许多网站所做的那样）。屏幕上应该有一个深色（OK），一个以屏幕为中心的盒子（OK），盒子边框和图片之间有一个1em的空间。图片可以是纵向或横向，应调整大小，使其不超过90％的高度和宽度（保持比例）。我试图纯粹用CSS / HTML做这个，没有javascript（如果可能的话）My goal

以下是我目前的代码：

HTML：

<div id="picture_viewer_container" class="picture_viewer_container">
    <div id="picture_viewer_content" class="box">
        <span id="picture_viewer_content_close">Fermer</span>
        <div id="picture_viewer_content_picture">
            <img src="data:image/jpeg;base64,xxx">
        </div>
    </div>
</div>

CSS

.box {
    background-color:#F6E9F7;
    border:1px solid #E298EA;
}

.picture_viewer_container {
    position:fixed;
    background: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index:1000;
    align-items: center;
    display: flex;
    justify-content: center;
}

#picture_viewer_content {
    padding:1em 1em 1em 1em;
    position:relative;
}

#picture_viewer_content_close {
    position:absolute;
    right:0;
    top:0;
}


#picture_viewer_content_picture {
    display:inline;
}

#picture_viewer_content_picture img {
    max-width:90%;
    max-height:90%;
}

当前问题：

风景图片在左侧和右侧获得超过1em的边距，但在上方和下方有适当的边距
肖像图片忽略最大高度并且大于屏幕。

Answer 1

对CSS img height使用auto。

#picture_viewer_content_picture img {
  max-width:90%;
  height:auto;
}

如果您需要其他解决方案，可以查看adaptive-images之类的内容。

HTML / CSS图像框（弹出窗口）调整为可变图像大小

1 个答案: