максимальная ширина, примененная к трем изображениям, по-разному меняется

Question

Попытка заставить все три изображения быть отзывчивыми и иметь одинаковый размер.

По какой-то причине этот код заставляет третье изображение быть меньше двух других.Есть идеи почему?

Это странно, потому что когда я удаляю max-width из .side-content-image img в CSS, изображения имеют одинаковый размер.Но как только он будет применен, третий будет меньше двух других.

Я удалил, надеюсь, посторонний код из этого HTML.Это все в контейнере с определенной шириной.

код:

.side-content-image {
  width: 35%;
  height: auto;
  border: 1px solid blue;
}

.side-content-image img {
  max-width: 100%;
}

<div class="side-content">
  <div class="side-content-image">
    <img src="./resources/images/information-orientation.jpg" alt="God
            view of people walking on a path">
  </div>
</div>

<div class="side-content">
  <div class="side-content-image">
    <img src="./resources/images/information-campus.jpg" alt="room
            with people at tables and world map on a wall">
  </div>
</div>

<div class="side-content">
  <div class="side-content-image">
    <img src="./resources/images/information-guest-lecture.jpg" alt="old
            man with glasses looking off into the distance">
  </div>

Answer 1

Я не могу воспроизвести проблему: https://jsfiddle.net/ee06wyzy/

Итак, я думаю:

1) Различное соотношение сторон изображения может вызвать некоторые проблемы, в том числе в зависимости от того, недостаточно ли какое-либо из изображений для заполнения размера контейнера. Попробуйте использовать одно и то же изображение во всех трех местах и ​​посмотрите, сохраняется ли проблема.

.side-content-image img  {
    width: 100%;
    height: auto;
}

2) Проблема может быть в side-content-image - width: 35%, три из них прибавят до 105%, что может привести к уменьшению side-content-image деления, если 3 деления отображаются в строке.

Попробуйте и посмотрите, исправлено ли это:

.side-content-image {
  width: 33%;
  height: auto;
  border: 1px solid blue;
}