Два изображения рядом и отзывчивый

Я пытаюсь поставить два изображения рядом и сделать их отзывчивыми. Проблема в том, что второе изображение сначала переносится, а затем реагирует на размер браузера. Я хочу, чтобы они оставались на одной линии (уровне), автоматически меняли свой размер и переносились в определенный момент (эта часть не проблема) ....

HTML:

<div id="wrapper">
  <div id="outer">
      <div class="itemwrapper">
        <img src="item2.jpg" alt="bag" />
      </div>
      <div class="itemwrapper">
        <img src="item3.jpg" alt="pen" />
      </div>
  </div>
</div>

CSS:

#wrapper {
  max-width: 1050px;
  margin: 60px auto 60px auto;
  background-color: #DDD
}

.itemwrapper {
  display: inline;
}

img {
  max-width: 100%;
  height: auto;
}

Кто-нибудь может помочь?

 G-Cyr01 июн. 2016 г., 19:52
изображение одинакового размера или соотношения?
 Yggdrasill01 авг. 2016 г., 13:41
Теперь это решает проблему. Комментарий «Это вызывает еще одну проблему. Изображения не заполняют обертки». относится к другой проблеме, которая в основном является чем-то конкретным, чего я тоже хотел достичь. Оба независимы.
 DCdaz06 июн. 2016 г., 10:00
Почему вы взяли ответ, который не работает? Это запутает людей, ищущих ответ на этот вопрос.
 DCdaz05 февр. 2019 г., 11:08
Можете ли вы выбрать подходящий ответ для этого. Этот пост просматривается много.

Ответы на вопрос(3)

Используйте таблицу отображения, чтобы установить его рядом и держать его рядом и отзывчивым.

display: table; сtable-layout: fixed; создаст гибкий макет для дочерних элементов сdisplay: table-cell;

это не только сохранит их одинаковую ширину, но также сохранит одинаковую высоту контейнеров.

vertical-align: top; будет держать их выровненными к вершине, в качестве альтернативы вы можете изменить вертикальное положение наmiddle а такжеbottom плюс некоторые другие.

Любые вопросы просто сгорают.

#wrapper {
  max-width: 1050px;
  margin: 60px auto 60px auto;
  background-color: #DDD
}
#outer {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.itemwrapper {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
img {
  max-width: 100%;
  height: auto;
}
<div id="wrapper">
  <div id="outer">
    <div class="itemwrapper">
      <img src="item2.jpg" alt="bag" />
    </div>
    <div class="itemwrapper">
      <img src="item3.jpg" alt="pen" />
    </div>
  </div>
</div>

 jj_04 янв. 2017 г., 19:04
Как бы вы интегрировали часть «сделать обтекание изображения в какой-то момент» в этом решении?
 DCdaz14 авг. 2017 г., 13:55
Используйте медиа-запрос, чтобы увеличить размер изображения

если изображение имеет одинаковый размер или такое же соотношение, вы можете использовать flex, width и min-width, чтобы установить точку разрыва:

#outer {
  width:70%;/* demo*/
  margin:auto;/* demo*/
  display:flex;
  flex-wrap:wrap;
}
#outer>div {flex:1;}
#outer>div>img {
  width:100%;
  min-width:200px;/* demo*/
}
<div id="wrapper">
  <div id="outer">
    <div class="itemwrapper">
      <img src="http://lorempixel.com/200/100" alt="bag" />
    </div>
    <div class="itemwrapper">
      <img src="http://lorempixel.com/400/200" alt="pen" />
    </div>
  </div>
</div>

удалить или сбросить в соответствии с вашими правиламидемонстрация.

 DCdaz01 июн. 2016 г., 20:00
Flex имеет очень плохую поддержку, особенно в IE и мобильных устройствах.
 jj_04 янв. 2017 г., 18:56
@DCdaz вашему комментарию уже пол года, и я не знаю, сильно ли что-то изменилось, но смотрю наcaniuse.com/#feat=flexbox Я бы скорее сказал, что Flex хорошо поддерживается всеми основными браузерами, за исключением IE (частично поддерживается) и старых браузеров Android (Android v. 4.3 и ниже). Я бы не стал определять эту «очень плохую поддержку», каково ваше текущее мнение?
 DCdaz05 янв. 2017 г., 16:55
@jj_ Привет, приятель, да, поддержка теперь намного лучше, но она все еще довольно плохо поддерживается. Многие пользователи все еще на IE, и поддержка на Android все еще ужасна. Особенно, если вы используете упаковку. Кроме того, хотя многие браузеры заявляют о своей полной поддержке, было множество сообщений об ужасном рендеринге и просто безумии. а также ужасные проблемы с оборудованием на мобильных устройствах. CSS таблица все еще гораздо более безопасный подход. и если вам нужна способность обертывания, используйте небольшой JS. если вы собираетесь использовать flex, убедитесь, что вы включили аппаратное ускорение и правильно его протестировали.

Спасибо за помощь, но я делаю это с другим решением, которое друг предложил:

HTML:

<div id="wrapper">
  <div id="outer">
      <div class="itemwrapper">
        <img src="item1.jpg" alt="bag" />
      </div>
      <div class="itemwrapper item2">
        <img src="item2.jpg" alt="pen" />
      </div>
  </div>
</div>

CSS:

#outer {
    position: relative;
    width: 50%;
    height: 0;
    margin: 30px auto 0 auto;
    padding-top: 25%;
    background-color: #999;
}

.itemwrapper {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
}

.item2 {
    left: 50%;
}

#outer img {
    height: 100%;
    max-width: 100%;
}

Это вызывает другую проблему, хотя. Изображения не заполняют обертки. Я думаю, что мне нужно написать несколько JS для этого: S.

 jj_04 янв. 2017 г., 18:32
Почему вы выбрали именно это решение, а не те, которые указаны в ответах?

Ваш ответ на вопрос