Адаптивные изображения в том же DIV - PullRequest
Новая
       52

Адаптивные изображения в том же DIV

1 голос
/ 06 марта 2020

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

Но я поместил 2 изображения в один и тот же элемент div следующим образом: 

<div class="wrapper">
      <div class="block">
        <img
          src=
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"

        ></img>
        <img
          src=
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"

        ></img>
      </div>

    </div>

Я не получу тот же эффект, ПОЧЕМУ?

https://jsfiddle.net/zqgy89k7/

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

Вы можете прокомментировать heigh: 200px код строки. И это было бы решением.

Другой способ - добавить flex-wrap: wrap в контейнер flex-папа , и это было бы более наглядно.

Вот Пример:

JS Скрипка с адаптивными изображениями

0 голосов
/ 06 марта 2020

Поскольку у вас все еще была ширина 100% на изображение. Установка ширины до 50% заставляет их снова масштабироваться. Также установите для высоты значение auto, чтобы сохранить пропорции.

См. Пример ниже: 

.wrapper {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  border: solid red;
}

.block {
  display: flex;
  width: 100%;
  border: solid blue;
}

.block img {
  width: 50%;
  max-width: 400px;
  height: auto;
}
<div class="wrapper">
  <div class="block">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
  </div>
</div>
...