1

所以我的代码有问题。当使用“flex 属性”并将其设置为 2 时，图像不会随其所在的 div 缩放。我知道我也可以从 div 中删除图像，将其设置为显示块，它会增加大小由于其给定的 flex 属性。

但是我想了解我在这里做错了什么，图像位于块级元素的 div 中，那么为什么在设置 flex 属性时图像不会随 div 缩放？

body {
  background-color: #696969;
}

.container-1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

img {
  width: 400px;
  height: 300px;
}

.box-1 {
  flex: 2;
  background-color: blue;
}
<div class="container-1">
  <div class="box-1">
    <img src="https://picfiles.alphacoders.com/288/288017.jpg" class="wolf-1">
  </div>
  <div class="box-2">
    <img src="https://picfiles.alphacoders.com/288/288017.jpg" class="wolf-2">
  </div>
  <div class="box-3">
    <img src="https://picfiles.alphacoders.com/288/288017.jpg" class="wolf-3">
  </div>
</div>

4

1 回答 1

0

如果要对图像进行分层并保持高度添加

.box-1 img{
  width: 100%;
}

如果您想保持适当的照片比例，请添加

.box-1 img{
  width: 100%;
  height: auto;
}


body {
  background-color: #696969;
}

.container-1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

img {
  width: 400px;
  height: 300px;
}

.box-1 {
  flex: 2;
  background-color: blue;
}

.box-1 img{
  width: 100%;
  height: auto;
}
<div class="container-1">
  <div class="box-1">
    <img src="https://picfiles.alphacoders.com/288/288017.jpg" class="wolf-1">
  </div>
  <div class="box-2">
    <img src="https://picfiles.alphacoders.com/288/288017.jpg" class="wolf-2">
  </div>
  <div class="box-3">
    <img src="https://picfiles.alphacoders.com/288/288017.jpg" class="wolf-3">
  </div>
</div>

于 2021-07-08T10:22:44.140 回答