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

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>