Question

我希望将2张图像居中，但由于显示效果，图像被拉伸不成比例：flex但是，如果没有它，则说明内容不合适

是否存在另一种以图像为中心的解决方案？

<div class="column-photo">
<div class="center">
<img src="img/2.%20GenerationAnxiety%20page%202,2.png" 
style="width:40vw;">

<img src="img/3.%20GenerationAnxiety%20page%203,3.png" 
style="width:40vw;">
</div>


column-photo {
flex-wrap: wrap;
flex: 33.33%;

}

.center {
display: flex;
justify-content: center!important;
align-content: center!important;
}

Answer 1

您已经错过了专栏专栏照片。

没有特定宽度的替代方式

.column-photo {
 text-align:center;
  display:block;
}
.center {
  display:inline-block;
  float:none;
}

Answer 2

如果你想要拉伸图像但保持比例，你应该将图像包装在具有单独宽度的div中。然后你可以给图像一个100％的宽度来保持这个。

如果你在这种情况下应该使用vw是另一个问题

<div class="column-photo">
  <div class="center">
    <div class="img-container" style="width: 40vw">
      <img src="http://via.placeholder.com/350x150">
    </div>
    <div class="img-container" style="width: 40vw">
      <img src="http://via.placeholder.com/350x150">
    </div>
  </div>
</div>

img{
  width: 100%;
}

Answer 3

看起来你搞砸了一些属性：

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="center">
  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg" style="width:10vw;">

  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg" style="width:20vw;">
</div>

如何在没有内容延伸的情况下集中内容？

3 个答案: