我有以下html:
<html>
<head>
<title>asd</title>
</head>
<body>
<div class="wrapper">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</body>
</html>
和以下css:
* { box-sizing: border-box; }
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: stretch;
justify-content: center;
}
.slide {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100vh;
transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
webkit-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide1 {
background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Fantastic-Full-HD-Wallpaper.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide2 {
background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Galaxy-Space-Full-HD-Wallpaper.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide3 {
background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Landscape-Full-HD-Wallpaper.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide4 {
background-image: url('http://hdwpro.com/wp-content/uploads/2018/10/Free-Desktop-Background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide:hover {
transform: scale(1.2);
z-index:20;
}
div flex里面的变焦似乎是变换 scale
上的一个小故障,我也想找到一种方法来缩放div内的背景图像而不是div(将在视口外缩放) .
我尝试添加父包装,但它缩放div而不是背景图像 .
正如您在此Codepen中看到的那样:https://codepen.io/pufosme/pen/MZWWpM
谢谢 !
2 回答
需要进入父div并添加
overflow:hidden
(抱歉我的英文不好 . )codepen链接https://codepen.io/dgknca/pen/ebYmRW
就个人而言,我会在每张幻灯片中使用IMG(使用object-fit和object-position来替换背景属性) . 然后缩放图像而不是幻灯片,并在每张幻灯片上设置
overflow: hidden
.喜欢这个https://codepen.io/anon/pen/bOGNoN
和HTML