无需裁剪的响应图像
Responsive image without cropping
我有两种全屏首页,一种是视频,一种是图片。我希望图像调整大小保持纵横比无线电始终尊重屏幕的大小。
全屏视频模板对我来说效果很好。我正在使用以下代码:
<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
不要使用 <img>
,而是尝试使用 background-image
,如下所示:
.image_box {
background-image: url("img/bg1.jpg");
background-repeat: no-repeat;
background-position: center;
}
将此 class 用于您的 <div>
。
此外,您还可以使用 background-size: contain/etc...
进行拉伸
更多background-size信息请参考http://www.w3schools.com/cssref/css3_pr_background-size.asp。
尝试使用图像的 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:包含; 属性 re-size 图像相对于内容和 re-size 本身。
我有两种全屏首页,一种是视频,一种是图片。我希望图像调整大小保持纵横比无线电始终尊重屏幕的大小。
全屏视频模板对我来说效果很好。我正在使用以下代码:
<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
不要使用 <img>
,而是尝试使用 background-image
,如下所示:
.image_box {
background-image: url("img/bg1.jpg");
background-repeat: no-repeat;
background-position: center;
}
将此 class 用于您的 <div>
。
此外,您还可以使用 background-size: contain/etc...
更多background-size信息请参考http://www.w3schools.com/cssref/css3_pr_background-size.asp。
尝试使用图像的 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:包含; 属性 re-size 图像相对于内容和 re-size 本身。