#html #css #image #bootstrap-4
Вопрос:
Я пытаюсь сделать свой образ идеально круглым и отзывчивым. Я использую класс Bootstrap 4 rounded-circle
img-fluid
, но изображение овальное, а не круглое. Изображения будут загружены пользователями, поэтому они не будут (всегда) в квадрате.
.nh-service-card img {
object-fit: cover;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row">
<div class="col-4 nh-service-card-img">
<img src="https://via.placeholder.com/728x90.png" alt="Reebit" class="img-fluid rounded-circle" width="85" height="85">
</div>
</div>
Комментарии:
1. Знаете ли вы размер каждого загружаемого изображения?
2. @Доминик Нет. Каждый пользователь может загрузить изображение любого размера.
3. Мой вопрос заключается в следующем: предоставляет ли ваш сервер вам индивидуальный размер каждого загружаемого изображения? Потому что это очень помогло бы 😉
4. @Доминик. Я не уверен, мне пришлось бы спросить свою команду разработчиков.
Ответ №1:
С вашим кодом есть несколько проблем:
object-fit
работает только в том случае, если для заменяемого элемента определена явная высота- Ваши имена классов неверны: в вашей разметке у вас есть
nh-service-card-img
, но в селекторе у вас естьnh-service-card
Мое решение зависит от требования, чтобы вы могли изменить DOM для добавления дополнительной оболочки <div>
вокруг изображения.
Решение 1: aspect-ratio: 1
Самый современный способ сделать это-просто aspect-ratio: 1
надеть элемент упаковки. aspect-ratio
Свойство относительно хорошо поддерживается, особенно среди современных браузеров evergreen.
.image-wrapper {
aspect-ratio: 1;
}
.nh-service-card-img img {
object-fit: cover;
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row">
<div class="col-4 nh-service-card-img">
<div class="image-wrapper">
<img src="https://via.placeholder.com/728x90.png" alt="Reebit" class="rounded-circle" width="85" height="85">
</div>
</div>
</div>
Решение 2: padding-bottom: 100%
принудительно увеличить квадратное соотношение сторон
В качестве альтернативы, если вы хотите поддерживать старые браузеры, воспользуйтесь этим padding-bottom
трюком:
.image-wrapper {
padding-bottom: 100%;
position: relative;
}
.nh-service-card-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row">
<div class="col-4 nh-service-card-img">
<div class="image-wrapper">
<img src="https://via.placeholder.com/728x90.png" alt="Reebit" class="rounded-circle" width="85" height="85">
</div>
</div>
</div>