Я бы хотел, чтобы изображение на десктопе осталось таким же, а на мобильном было больше по высоте. Что мне изменить в коде? Я также использую Bootstrap 5.
<div class = "container">
<div class = "row">
<div class = "col-12">
<img src = "/images/section1/home-image.jpg" class = "img-fluid" id = "img1" alt = "man on boat">
<img src = "/images/section1/home-logo.png" class = "img-fluid" id = "img2" alt = "logo Seafarer">
</div>
</div>
</div>
#section1 {
position:relative;
}
#img2 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Ну вот...
Я думаю, что это невозможно достичь с помощью Bootstrap. Я бы использовал запрос @media
на вашем месте.
Добавьте это в свой CSS:
@media only screen and (max-width: 575px) {
.col-12 {
height: 500px; // Adjust the height
}
#img1 {
object-fit: cover;
height: 100%;
}
}
Важно добавить object-fit: cover;
, иначе ваше изображение будет испорчено. Попробуйте удалить эту строку, чтобы понять, о чем я говорю.
Дайте мне знать, если это будет полезно.
Я добавил его в свой код, и он работает так, как я хотел. Благодарю вас !