Tell me, please, there is a div in which there is an image and a div with text, how to make the height of the image automatically adjust to the height of the second diva with the text? And of course, so that the image does not stretch only in height, but also fit in width. Thank you in advance

.new { display: flex; align-items: center; } 
 <div class="new"> <img src="img/news.png" alt="news"> <div class="right-new"> <p>1 hour ago</p> <h3>New startup idea loremsu ipsumers <br>Lorem ipsum lorem them startuping</h3> <p>by <span>Kadir</span></p> </div> </div>

  • The aspect-ratio plays quite a big role, and for example, if the amount of text passes, it turns out that your image will stretch - what will be at least the Hat, Do you understand that the image is Vertical Horizontal and Square? Here's what to do in this case? This problem is not possible to solve - Nikita Fast
  • @ NikitaFast, chrome disagrees with you. Yes, and I also have a few thoughts, but some are terribly complex. - Qwertiy ♦
  • @ NikitaFast, let's continue the discussion in the chat . - Qwertiy ♦

2 answers 2

 .new { display: flex; align-items: stretch; }

  • It does not work at all. - Qwertiy ♦

Through grid works in chrome, in Edge and FF does not work:

 main { display: grid; grid-template-columns: auto 1fr; } img { height: 100%; } main { border: 1px dotted red; margin: 1em; } section :first-child { margin-top: 0; } section :last-child { margin-bottom: 0; } 
 <main> <img src="//i.stack.imgur.com/5NiXj.jpg"> <section> <p>1 hour ago</p> <h3>New startup idea loremsu ipsumers <br>Lorem ipsum lorem them startuping</h3> <p>by <span>Kadir</span></p> </section> </main> <main> <img src="//i.stack.imgur.com/5NiXj.jpg"> <section> <p>1 hour ago</p> </section> </main> <main> <img src="//i.stack.imgur.com/5NiXj.jpg"> <section> <p>1 hour ago</p> <h3>New startup idea loremsu ipsumers <br>Lorem ipsum lorem them startuping</h3> <p>by <span>Kadir</span></p> <p>1 hour ago</p> <h3>New startup idea loremsu ipsumers <br>Lorem ipsum lorem them startuping</h3> <p>by <span>Kadir</span></p> <p>1 hour ago</p> <h3>New startup idea loremsu ipsumers <br>Lorem ipsum lorem them startuping</h3> <p>by <span>Kadir</span></p> </section> </main>

  • Desirable cross-browser solution - Pavel Rumyantsev
  • @PavelRumyantsev specify in the text of the question how cross - browser - andreymal
  • at least to work in more than 1 browser :) - Pavel Rumyantsev
  • @PavelRumyantsev, so I did not check how much it works. Maybe in all modern. SO in its markup has long been used with grids. - Qwertiy ♦
  • And in general, for what a minus? - Qwertiy ♦