CSS 子项内的 Flexbox 图像比例

Question

I have the following 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>

and the following 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

谢谢！

Answer 1

您可以像下面这样尝试。我用父容器包装了 slides 并添加了 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>

Answer 2

就我个人而言，我会在每张幻灯片中使用 IMG（使用 object-fit 和 object-position 来替换背景属性）。然后缩放图像而不是幻灯片，并且在每张幻灯片上设置 overflow: hidden.

像这样https://codepen.io/anon/pen/bOGNoN

.slide {
  ...
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slide img {
  object-fit: cover;
  object-position: 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);
}

.slide:hover img {
  transform: scale(1.2);
  z-index:20;
  -webkit-box-shadow: 0px 0px 10px 0px rg-webkit-box-shadow: 0px 0px 18px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 18px 1px rgba(0,0,0,0.5);
box-shadow: 0px 0px 18px 1px rgba(0,0,0,0.5);
}

和HTML

<div class="slide slide1">
  <img src='http://hdwpro.com/wp-content/uploads/2016/03/Fantastic-Full-HD-Wallpaper.jpg' />
</div>

CSS 子项内的 Flexbox 图像比例

CSS Flexbox image scale inside child

css

flexbox

css-transitions

css-transforms