как заставить изображения показывать в портрете?

Question

У меня есть веб-страница, которая содержит изображения в загрузочной карточке, но некоторые из них в альбомной, а некоторые в портретной ориентации, поэтому как заставить все изображения отображать в портретной ориентации, предпочтительно используя только CSS или Boosttrap 4 или HTML5.

вот мой код:

<div class="card mb-4"style="min-width: 18rem; max-width: 18rem;"> 
<img src="images/1.jpeg" alt="image" class="card-img-top img-responsive">
</div>

Answer 1

Это потребует некоторой формы обрезки с использованием элемента div.Трудно сказать точно, что вы ищете, не видя веб-сайт, но вот одно из возможных решений, использующее height:0; и процент padding-bottom для создания div с фиксированным соотношением сторон, а затем с использованием фонового изображения вместо изображения,

Если вы все еще хотите использовать изображение, вам нужно либо использовать Javascript, либо новое свойство object-fit CSS, но IE 100 не поддерживается.

.portrait {
  height:0;
  padding-bottom:150%;
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="card mb-4"style="min-width: 18rem; max-width: 18rem;">
  <div class="portrait" style="background-image:url(https://via.placeholder.com/200x300);"></div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card mb-4"style="min-width: 18rem; max-width: 18rem;">
  <div class="portrait" style="background-image:url(https://via.placeholder.com/300x200);"></div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>