时间戳

首页 > 解决方案 > 子元素内的 CSS Flexbox 图像缩放

css - 子元素内的 CSS Flexbox 图像缩放

问题描述

我有以下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

谢谢 ！

标签： cssflexboxcss-transitionscss-transforms

解决方案

您可以尝试如下。我用slide父容器包装了 s 并添加了overflow: hidden.

* {
  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;
}

.parent {
  flex: 1;
  height: 100vh;
  overflow: hidden;
}

.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: 100%;
  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);
}
<div class="wrapper">
  <div class="parent">
    <div class="slide slide1"></div>
  </div>
  <div class="parent">
    <div class="slide slide2"></div>
  </div>
  <div class="parent">
    <div class="slide slide3"></div>
  </div>
  <div class="parent">
    <div class="slide slide4"></div>
  </div>
</div>

推荐阅读