子元素内的 CSS Flexbox 图像缩放答案

【问题标题】：CSS Flexbox image scale inside child子元素内的 CSS Flexbox 图像缩放
【发布时间】：2019-05-10 06:01:33
【问题描述】：

我有以下 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 内部的缩放似乎是 transform scale 的一个小故障而且我还想找到一种方法来缩放 div 内的背景图像而不是 div （将在视口之外缩放）。

我尝试添加一个父包装器，但它会缩放 div 而不是背景图像。

正如您在此 Codepen 中看到的： https://codepen.io/pufosme/pen/MZWWpM

谢谢！

【问题讨论】：

标签： css flexbox css-transitions css-transforms

【解决方案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>

【讨论】：

为什么宽度：400px？
我更改为flex:1，这样即使在插入新图像后，它们都一样宽。
我现在看到了，但我仍然不明白为什么它与 flex 一起工作：1 :) 而且我认为你应该使用 -webkit-flex: 1; 和 -ms-flex: 1;
这是额外的，所以我需要一个提示。我希望将来添加一个事件，单击该 div，以完全展开，就像从它所在的位置向左向右滑动到浏览器的整个宽度一样。任何提示？

【解决方案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>

【讨论】：

@DogukanCavus 刚刚试了一下，它可以工作，不知道为什么它不为你打开。
我确认 codepen 工作正常。这真的很好，但是 object-fit 和 object-position 是跨浏览器支持的？
W3school 说 object-fit 和 object-position 适用于所有现代浏览器。 MDN 说object-position 在 safari 上不起作用，不知道 w3school 是否在撒谎，或者 MDN 是否已过时哈哈。
caniuse.com/#search=object-position 表示两者都适用于所有现代浏览器。编辑：对不起，caniuse 说的和 MDN 一样，safari 不支持对象位置