CSS Flexbox图像缩放内部子对象

我有以下html：

div flex内部的缩放看起来是转换

scale

我还想找到一种方法来缩放div内部的背景图像，而不是div（将在视图端口外部进行缩放）

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

正如您在这个代码笔中看到的：

---

谢谢大家!

您可以像下面这样尝试。我用父容器包装了

幻灯片

s，并添加了

溢出：隐藏

*{
框大小：边框框；
}
.包装纸{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
对齐项目：拉伸；
证明内容：中心；
}
.家长{
弹性：1；
高度：100vh；
溢出：隐藏；
}
.幻灯片{
位置：相对位置；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-网络工具包盒方向：垂直；
-莫兹盒方向：垂直；
-webkit盒方向：正常；
-莫兹盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit框对齐：居中；
-moz框对齐：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
-webkit盒包：中心；
-莫兹盒包装：中心；
-ms-flex-pack:center；
-webkit内容：中心；
证明内容：中心；
宽度：100%；
身高：100%；
过渡：所有250ms立方贝塞尔（0.25,0.46,0.45,0.94）；
webkit过渡：所有250ms立方贝塞尔（0.25,0.46,0.45,0.94）；
}
.幻灯片1{
背景图像：url（'http://hdwpro.com/wp-content/uploads/2016/03/Fantastic-Full-HD-Wallpaper.jpg');
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.幻灯片2{
背景图像：url（'http://hdwpro.com/wp-content/uploads/2016/03/Galaxy-Space-Full-HD-Wallpaper.jpg');
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.幻灯片3{
背景图像：url（'http://hdwpro.com/wp-content/uploads/2016/03/Landscape-Full-HD-Wallpaper.jpg');
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.幻灯片4{
背景图像：url（'http://hdwpro.com/wp-content/uploads/2018/10/Free-Desktop-Background.jpg');
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.幻灯片：悬停{
转换：比例（1.2）；
}

---

就我个人而言，我会在每张幻灯片中使用一个IMG（使用对象匹配和对象位置来替换背景属性）。然后缩放图像而不是幻灯片，并在每张幻灯片上设置

overflow:hidden

像这样

还有HTML

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

@dokukancavus刚刚试过，但它有效，不知道为什么它不能为您打开。我确认codepen有效。这真的很好，但是对象匹配和对象位置是交叉浏览器支持吗？W3school说

对象匹配

和

对象位置

适用于所有现代浏览器。MDN说对象位置在safari上不起作用，不知道w3school是否撒谎或者MDN是否过时了哈哈。据说这两种浏览器都适用于所有现代浏览器。编辑：对不起，caniuse说的和MDN一样，safari不支持对象位置为什么宽度：400px？我使用

flex:1

进行更改，这样即使插入一个新图像，它们也同样宽。我现在看到了，但我仍然不明白为什么它使用flex:1:）而且我认为您应该使用

-webkit flex:1和
-ms-flex:1这是额外的，所以我需要一个提示。我将希望在将来添加一个事件，在该div上单击，完全像从其所在位置向左-向右滑动一样扩展到浏览器的整个宽度。有小费吗？
* { 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;
}

.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);
}

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