如何在浏览器窗口中居中和调整未知大小/纵横比的 div/img答案

【问题标题】：How center and size a div/img of unknown size/aspect ratio within a browser window如何在浏览器窗口中居中和调整未知大小/纵横比的 div/img
【发布时间】：2014-04-23 03:19:08
【问题描述】：

我创建了一个包含一组缩略图的照片库。我要做的是让用户将鼠标悬停在缩略图上并弹出一个 div，该 div 或多或少地用全尺寸图像填充浏览器窗口。我几乎可以做到这一切，但不能完全弄清楚如何在不裁剪的情况下始终缩小图像以适应。只要浏览器窗口与照片的纵横比大致相同，它就可以完美运行。请注意，我事先不知道完整图像的大小，也不知道它的纵横比是多少。我已经尝试过使用一些 jQuery 来尝试解决这个问题，但我开始认为如果没有大量代码，这可能是不可能的（在这种情况下，我会放弃，因为这不是那么关键 - 它更像是一个在这一点上的智力挑战）

我现在的代码是

<style>
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
</style>
<body>
    <div class="popup">     
        <img width="100%" src="some_image.png" />
    </div>
</body>

【问题讨论】：

完全看不懂问题，能不能给个图或者jsfiddle demo
这是一个小提琴jsfiddle.net/q8sk6。缩小结果窗口，使其不是很高，并且图像将开始被裁剪，与纵横比相同（缩小窗口的“肖像”图像将开始裁剪）。我看不出有办法避免这些问题，但如果你不问……在 stackoverflow 上有很多聪明人和比我更好的 CSS 编码器
jsfiddle.net/erenyener/q8sk6/1这是你想做的吗？

标签： css image html center

【解决方案1】：

rkwright，如果我对您的理解正确，您希望弹出窗口中的图像根据浏览器宽度调整大小吗？由于您已将图像宽度设置为 100%，因此您需要将弹出窗口的宽度设置为浏览器窗口的百分比。然后，由于图像是弹出窗口的子项，因此它将大小为弹出窗口的 100%。试试看是否有帮助。

.popup {
   width: 90%;
}

【讨论】：

试过了，也不管用。最终，无论图像是横向还是纵向，当浏览器窗口低于图像的纵横比时，它就会开始裁剪。我不知道底层浏览器逻辑是什么，但我怀疑这隐藏在盒子模型实现的奥秘中。似乎无法克服。需要明确的是，我有一个适用于大多数（正常）情况的解决方案，所以这更像是一种智力追求，但如果有答案，我想知道。
您是否尝试将图像的宽度设置为自动而不是 100%？我会在 css 中而不是在标签本身中设置它。

【解决方案2】：

试试这样的：（未经测试）

.popup {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.6)
}

.popup img {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
}

【讨论】：

抱歉，这会更糟，因为它会扭曲图像。
扭曲？它应该在保持纵横比不变的同时调整大小：jsfiddle.net/8vDjH