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

【问题标题】：HTML/CSS Image box (popup) adjusting to variable images sizeHTML/CSS 图像框（弹出）调整为可变图像大小
【发布时间】：2016-03-18 20:09:00
【问题描述】：

我正在尝试在深色背景上创建一个框以在内容上显示图片（就像许多网站一样）。应该有一个深色填充屏幕（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，但上下边距适当
纵向图片忽略最大高度并且大于屏幕。

【问题讨论】：

标签： html css

【解决方案1】：

使用 auto 与您的 CSS img 高度。

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

如果您需要其他解决方案，可能需要考虑 adaptive-images 之类的内容。

【讨论】：

但是如果图片是纵向格式，这将不起作用？（高度>宽度）对吗？