Адаптировать изображение CSS

211
26 февраля 2019, 07:10

Подскажите, пожалуйста, есть див в котором находится изображение и див с текстом, как сделать, чтобы высота изображения автоматически подстраивалась под высоту второго дива с текстом? Ну и естественно, чтобы изображение не растягивалось только по высоте, но и по ширине подгонялось. Заранее спасибо

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

Answer 1

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

Answer 2

Через грид работает в хроме, в Edge и FF не работает:

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>

READ ALSO
Как раскрыть панель навигации?
HTML

Как раскрыть панель навигации?

При уменьшении окна браузера панель навигации сворачивается, но раскрыть её обратно не получается, хотелось бы чтобы при нажатии на кнопку...

 233
Прозрачность в css [закрыт]
HTML

Прозрачность в css [закрыт]

При создании прямоугольника с сделал обводку, хотел изменить прозрачность середины, но чтобы обводка не была прозрачной

 205
Отмена цвета фона при наведении
HTML

Отмена цвета фона при наведении

Например, если наводим на 2ой или 3й блок, то у первого блока цвет становится как у остальных - серыйЕсли курсор за пределами всех блоков, то у первого...

 240
SetSelectedTab в Android Studio
HTML

SetSelectedTab в Android Studio

Я бы хотел сделать так, что бы нажатии кнопки в андроид приложении меня перекидывало на вкладку сайта, вот сам скрипт кнопки от сайта:

 199