gpt4 book ai didi

html - 当设备仅从纵向旋转到横向时,网页上的全屏图像被压扁

转载 作者:太空宇宙 更新时间:2023-11-04 13:06:59 25 4
gpt4 key购买 nike

图像在设备上以纵向显示良好(覆盖整个背景),但当旋转为横向时图像被压扁。只有当它最初加载为纵向时才会发生这种情况;如果网站最初是以横向加载的,那么当您在横向和纵向之间旋转时,它显示良好。我网站的其余部分不受影响。

这里只是图片的 fiddle :http://jsfiddle.net/pauljackson/66sqz/

还有我的网站:http://wabi-sabi.cc

html:

<body>
<div class="slide-wrapper">
<div class="full-video-wrapper">
<img src="http://www.wabi-sabi.cc/test/images/wabisabiwebvideo.jpg" id="bgimg" alt="Full Screen Image">
</div>
</div>
</body>

CSS:

body { margin: 0; padding: 0; height: 100%; width: 100%; }

.slide-wrapper {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.full-video-wrapper {
background: white;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
overflow: hidden;
}
#bgimg {
height:100%;
width:auto;
margin:0 auto;
overflow:hidden;
}

最佳答案

我建议你使用这样的东西:

tag { 
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

这将覆盖该区域,但不会(据推测)挤压您的图像。亦注;背景大小函数恕我直言是最好的方法;您可以在这里看到许多不同的设置: W3Schools

关于html - 当设备仅从纵向旋转到横向时,网页上的全屏图像被压扁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25051407/

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