How to prevent flex container from scaling images inside it? The size of the images is not fixed, may be different, and they should be displayed in full size.

 .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 answer 1

    Auto prefix may be required.

     .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>

    • 2
      In my opinion, in this example it is generally enough to wrap img in divs, by analogy with the text - Mr. Brightside
    • I agree. But I love css more. ) - Andrey Fedorov
    • object-fit - not supported by anything other than opera, why write it? - user33274 pm
    • @Geyan right? caniuse.com/#search=object-fit - Andrey Fedorov 4:39 pm
    • pardon Sir, I got confused - with htmlbook.ru there was infa - user33274