gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:00:36 25 4
gpt4 key购买 nike

我创建了一个包含一组缩略图的照片库。我想要做的是让用户将鼠标悬停在缩略图上并弹出一个 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>

最佳答案

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

.popup {
width: 90%;
}

关于css - 如何在浏览器窗口中居中和调整大小/纵横比未知的 div/img,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22462498/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com