Как я могу центрировать контент без растягивания контента?

Question

Я хочу центрировать 2 изображения, но изображения растягиваются из-за пропорций из-за отображения: гибкий, но выровненный контент не будет работать без него

есть ли другое решение для центрирования изображений?

<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

Если вы хотите растянуть изображения, но сохранить соотношение сторон, вы должны обернуть изображения в 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 2

Похоже, вы испортили некоторые свойства:

.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>

Answer 3

Вы пропустили точку с классом column-photo.

Альтернативный способ без определенной ширины

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