Изображения не масштабируются

Question

На моей домашней странице есть 3 изображения, которые я хочу сделать отзывчивыми. Они не масштабируются. Я удалил любую ссылку на высоту или ширину в html. Я попытался использовать правило максимальной ширины CSS, которое предназначено для изображения в качестве значения относительной ширины в процентах, но не может заставить его работать.

Мой html выглядит следующим образом:

<div class ="wrapper2">
    <div>
        <a href="https://www.whitehallpubliclibrary.org/kids-parent/kids/special-events-for-kids/"><img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/kidsspecialevents.jpg" /></a></div>
<div>
        <a href="https://www.whitehallpubliclibrary.org/teens-parent/teens/special-events-for-teens/"><img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/teenspecialevents.jpg" /></a></div>
    <div>
        <a href="https://www.whitehallpubliclibrary.org/adults-parent/adults/special-events-for-adults/"><img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/adultspecialevents.jpg" /></a></div>
    </div>

css (это не работает) выглядит следующим образом:

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

Любая помощь с этим будет оценена. Я работал над этим и выключался уже несколько месяцев! Спасибо

Answer 1

Как сказал Роб, .wrapper img {max-width:100%;} только сообщает браузеру, что вы не хотите, чтобы изображение было шире, на 100% ширины окна браузера.

Проверьте это кодовое перо с прилагаемым HTML, которое показывает, что вы хотите: Кодовое перо

Ширина теперь установлена ​​на 50%, и высота установлена ​​на auto. Изображения теперь занимают 50% ширины окна браузера и корректируют их высоту в соответствии с исходным соотношением сторон.

Вот только CSS:

.wrapper2 img { height: auto; width: 50%; }

Answer 2

Пожалуйста, попробуйте это -

<div class ="wrapper2">
  <div>
    <a href="https://www.whitehallpubliclibrary.org/kids-parent/kids/special-events-for-kids/"><img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/kidsspecialevents.jpg" /></a>
  </div>
  <div>
    <a href="https://www.whitehallpubliclibrary.org/teens-parent/teens/special-events-for-teens/"><img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/teenspecialevents.jpg" /></a>
  </div>
  <div>
    <a href="https://www.whitehallpubliclibrary.org/adults-parent/adults/special-events-for-adults/"><img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/adultspecialevents.jpg" /></a>
  </div>
</div>

.wrapper2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.wrapper2 div {
  width: calc(100%/3 - 2%);
  margin: 0 1%;
}
.wrapper2 div a, .wrapper2 div img {
  width: 100%;
}

Answer 3

Я сделал этот код, если хотите.

.wrapper2 img {
  height: auto;
  width: 100%;
}

.wrapper2 div { float:left; width:33.33%; positive:realtive;}

<div class ="wrapper2">
    <div>
        <a href="https://www.whitehallpubliclibrary.org/kids-parent/kids/special-events-for-kids/">
          <img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/kidsspecialevents.jpg">   
        </a>
    </div>
    <div>
        <a href="https://www.whitehallpubliclibrary.org/teens-parent/teens/special-events-for-teens/">
          <img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/teenspecialevents.jpg">  
        </a>
    </div>
    <div>
        <a href="https://www.whitehallpubliclibrary.org/adults-parent/adults/special-events-for-adults/">
          <img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/adultspecialevents.jpg">
        </a>
    </div>
</div>

Спасибо