2

Как запретить контейнеру flex масштабировать изображения внутри него? Размер изображений не фиксированный, может быть разный, и они должны отображаться в полном размере.

.flexbox {
  display: flex;
}
.img1 {
  margin-left: 50px;
}
.img2 {
  margin-right: 50px;
}
<div class = "flexbox">
  <img src = "http://file.mobilmusic.ru/9f/a9/d6/1000877-128.jpg" class = "img1">
  <div>
  <p>Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов.</p>
  <p>Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д.</p>
  </div>
  <img src = "http://s020.radikal.ru/i713/1304/42/b4d938de22e4.jpg" class = "img2">
</div>

1 ответ 1

4

Может потребоваться автопрефиксер.

.flexbox {
  display: flex;
}

.flexbox div {
  flex: 1 1;
}

.img1 {
  margin-left: 50px;
  object-fit: none;
}

.img2 {
  margin-right: 50px;
  object-fit: none;
}
<div class = "flexbox">
  <img src = "http://file.mobilmusic.ru/9f/a9/d6/1000877-128.jpg" class = "img1">
  <div>
  <p>Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов.</p>
  <p>Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д.</p>
  </div>
  <img src = "http://s020.radikal.ru/i713/1304/42/b4d938de22e4.jpg" class = "img2">
</div>

12
  • 2
    По-моему, в данном примере вообще достаточно обернуть img в div'ы, по аналогии с текстом 25 июл 2016 в 11:36
  • Согласен. Но css я люблю больше. ) 25 июл 2016 в 13:14
  • object-fit - не поддерживается ни где кроме оперы , для чего это писать ?
    – user33274
    25 июл 2016 в 16:35
  • @Geyan правда? caniuse.com/#search=object-fit 25 июл 2016 в 16:39
  • пардон Сэр , обознался - с htmlbook.ru инфа была
    – user33274
    25 июл 2016 в 16:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.