Как выровнять изображения разного размера
Я пытаюсь написать страницу с изображениями разного размера, но не могу понять, как их правильно выровнять. Вот как выглядит веб-страница: https://i.imgur.com/Li17CMl.jpg
Я добавил bootstrap img-fluid для отзывчивости. Если я установлю фиксированную высоту, изображения не будут правильно масштабироваться на небольших экранах.
Я очистил некоторые несвязанные данные с помощью '...', чтобы код выглядел чище. Мой текущий код:
foreach(row...) : ?>
<div class = "col-md-6" style = "padding...">
<div class = "card">
<div class = "card-body" style = "padding...">
<a href = "">
<div>
<img class = "img-fluid" style = "width: 100%;" src = "row->image..." alt = "">
</div>
<div>
<h5> title </h1>
<h6> date </h6>
</div>
</a>
</div> <!-- /card body -->
</div> <!-- /card -->
</div> <!-- /col-6 -->
<?php endforeach; ?>
Я надеюсь, что изображения будут уменьшаться на небольших экранах.
Это php-код. Пожалуйста, добавьте тег PHP
@MMJM подумал, что код в вопросе представляет собой кусок php, но вопрос не имеет ничего общего с php.
Ответы 2
TL:DRobject-fit: cover; сделает свое дело.
Решение 1 — ФИКСИРОВАННАЯ ВЫСОТА
с этим решением вы должны установить значение высоты изображений: фотографии не будут растягиваться, но соотношение будет разным для каждого экрана.
.img-fluid {
height: 200px; /* insert here your desired height*/
object-fit:cover;
}
Решение 2 — НАСТОЯЩАЯ ЖИДКОСТЬ
это решение немного сложнее, но фотографии всегда будут иметь соотношение, которое вы выберете.
.card-body a div:first-child {
position: relative;
width: 100%;
height: 0;
padding-top: 60%; /*insert value for the desired ratio. ie: 60% -> 10/6 image*/
}
.img-fluid {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Пожалуйста, используйте код ниже:
.img-card img{width:100%;height:300px;object-fit:cover;}
.img-card{margin-bottom:15px;margin-top:15px;}<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class = "container">
<div class = "row">
<div class = "col-6">
<div class = "img-card">
<img src = "https://i.ytimg.com/vi/VDNd4KjELkU/maxresdefault.jpg" />
</div>
</div>
<div class = "col-6">
<div class = "img-card">
<img src = "https://media-cdn.tripadvisor.com/media/photo-s/0f/5e/fc/f5/inkaya-cinari.jpg" />
</div>
</div>
<div class = "col-6">
<div class = "img-card">
<img src = "https://thumbs.dreamstime.com/z/scenery-5680647.jpg" />
</div>
</div>
<div class = "col-6">
<div class = "img-card">
<img src = "https://cdn.pixabay.com/photo/2015/11/11/03/47/evening-1038148__340.jpg" />
</div>
</div>
</div>
</div>
Попробуйте минимальную высоту для изображения