gpt4 book ai didi

jquery - 保持宽高比的全屏 div 中的图像

转载 作者:行者123 更新时间:2023-11-28 13:14:49 24 4
gpt4 key购买 nike

我尝试将图像放入 div 以全屏显示。我尝试了很多方法,但如果图像的高度大于宽度,我会遇到很多问题,在这种情况下,图像应该居中显示,剩余空间使用容器 div 的背景颜色,我不想裁剪图片

最佳答案

使用background-size:contain。这将防止裁剪并保持比例,同时仍然试图填充尽可能多的空间。

居中使用 background-position:center;

div {
background-image:url('http://static.tumblr.com/purt4nm/BCJmqjvcj/1367698942181.jpg');
}

http://jsbin.com/enaxif/1/edit

关于jquery - 保持宽高比的全屏 div 中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17885445/

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