0
背景封面和百分比宽度可以缩放并调整图片以适合视口比16/9更加水平的情况。对于屏幕高度大于0.5625的宽度,外部布局部分开始吃中心。在这种情况下,从左侧和右侧裁剪可能会更好,或者可能会在顶部和底部添加空白条。可调整大小的三列背景图片/封面版式
请提供您已知的最佳实践。 非常感谢您的参与,和平,ayo。
<div class="bg">
</div>
<div class="column" id="column_left">
</div>
<div class="column" id="column_center">
</div>
<div class="column" id="column_right">
</div>
CSS:
bg {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
max-width: 1920px;
background: url(images/1920/bg.png) no-repeat center 0 /cover;
}
.column {
max-width: 100%;
opacity: 0;
display: block;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position: absolute;
height: 100%;
&:hover {
opacity: 1;
cursor: pointer;
}
}
#column_left {
float: left;
left: 0;
width: 38.85%;
background: url(images/1920/left.png) no-repeat 0 0 /cover;
}
#column_center {
float: left;
left: 0;
right: 0;
margin-left: 26.17%;
width: 44.69%;
background: url(images/1920/center.png) no-repeat center 0 /cover;
}
#column_right {
float: right;
right: 0;
width: 39.58%;
background: url(images/1920/right.png) no-repeat 100% 0 /cover;
}
我只想用'对象的配合推荐:盖;'确保萎缩视口的宽度缩小到图像的中心,不收缩或拉伸。 –
我不确定其他人是否难以理解您的问题,但为了提高您获得答案的机会,最好提供一个使用占位符图片的片段/小提琴/ codepen,以准确显示您的问题。 – WizardCoder