CSS Некорректно отображаются картинки

Question

В видео-уроке тот же код, и отображаться он должен так:

Но вместо этого, у меня:

(надеюсь отличие надписей и картинок не критично)

.about {
  display: flex;
  justify-content: space-between;
}

.about_item {
  width: 30%;
}

<div class="about">
  <div class="about_item">
    <div class="about_img">
      <img src="assets/image/About/Star.jpeg" alt="">
    </div>
  </div>
  <div class="about_item">
    <div class="about_img">
      <img src="assets/image/About/Mjolnir.jpg" alt="">
    </div>
  </div>
  <div class="about_item">
    <div class="about_img">
      <img src="assets/image/About/Batcar.jpg" alt="">
    </div>
  </div>
</div>

Answer 1

Очевидно, что ширина изображений превышает ширину элемента .about-item. Чтобы ограничить ширину изображения по ширине родителя - указываем для него max-width: 100%. В css выглядеть это должно примерно так:

.about_item img {
  max-width: 100%;
}

БЛОГ НА HUSL

CSS Некорректно отображаются картинки

Ответы (1 шт):