我有两种全屏主页,一种是视频,一种是图片。我希望图像调整大小,同时保持纵横比 radio 始终尊重屏幕的大小。
全屏视频模板对我来说效果很好。我正在使用下面的代码:
<div style="background-color: #000000;
width: 100%;
height: 100%;
z-index: 997;
position: fixed;
top: 0;
left: 0;">
<video autoplay poster="img/jerusalem.jpg" id="bgvid" loop style="
position: fixed;
top: 50%;
left: 50%;
width: 100%;
max-height: 100%;
z-index: 998;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);">
<source src="video/jerusalem.webm" type="video/webm">
<source src="video/jerusalem.mp4" type="video/mp4">
<source src="video/jerusalem.ogv" type="video/ogg">
</video>
</div>
但是我在使用全屏图像模板时遇到了问题,我已经尝试使用相同的代码但它对我不起作用
<div style="background-color: #000000;
width: 100%;
height: 100%;
z-index: 997;
position: fixed;
top: 0;
left: 0;">
<img src="img/bg1.jpg" style="
position: fixed;
top: 50%;
left: 50%;
width: 100%;
max-height: 100%;
z-index: 998;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);">
</div>
我已经尝试使用下面的代码,但在这种情况下图像不会增加。
max-width: 100%;
max-height: 100%;
有人可以帮助我吗? :D
最佳答案
尝试使用图像的 css 属性,即
.imageclass
{
width:100%
height: auto;
background-attachment: fixed;
background-size: contain; /* or cover , etc */
background-position: center;
background-repeat: no repeat;
}
在上面的 CSS 中,background-size:contain;属性根据内容调整图像大小并调整自身大小。
关于html - 无需裁剪的响应图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34595517/