Закругленные углы изображений внутри карты выглядят неправильно
У меня есть несколько карточек с изображениями внутри этих карточек. Я хочу, чтобы изображения имели закругленные углы. Код работал, но закругленные углы выглядят неправильно.
Для изображений я просто использую класс Bootstrap rounded. Изображения уменьшены, но не искажены. Это CSS для карт:
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #F5F5F5;
background-clip: border-box;
border: 0.0625rem solid #E5E7EB;
border-radius: 1rem; }
Упрощенный HTML:
<div class = "card border-0 p-3 p-md-3 p-lg-4 mb-3">
<div class = "row pb-4 text-left">
<div class = "col-1 ps-1">
<h1 class = "id-circle">B</h1>
</div>
<div class = "col-11">
<span class = "description details-text pe-1">Text</span>
</div>
</div>
<div class = "row gy-3 mb-1 pb-0">
<div class = "col-lg-6 col-md-6 col-sm-6 pb-0">
<div class = "row pt-0 pb-0 image-row">
<img class = "rounded" src = "https://picsum.photos/id/237/300/200">
</div>
</div>
</div>
</div>
Любые идеи о том, что может происходить? Пожалуйста, дайте мне знать, если потребуется дополнительная информация.
Я отредактировал свое объяснение. Пожалуйста, дайте мне знать, если нужна дополнительная информация @RenevanderLende
Ответы 2
Попробуйте сделать
border-radius: 25px;
иногда rem не работает для радиуса границы
Это не единица rem, которая дает странные результаты, обычно используется неправильное значение.
Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, отредактируйте , чтобы добавить дополнительные сведения, такие как цитаты или документация, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти больше информации о том, как писать хорошие ответы в справочном центре.
Проверьте фрагмент ниже: с вашим CSS и HTML в обоих случаях загрузчик создает небольшой закругленный угол 4px вокруг изображений с помощью .rounded { border-radius: .25rem !important } (Firefox DevTools). Фактически, с вашим HTML (второй карточкой) закругленные границы изображения исчезли.
Все еще не показывая нежелательный результат, который вы испытываете. Что-то еще в вашем CSS создает результат.
Нечетный радиус границы на изображении не воспроизводится в Stackoverflow с вашим кодом.
Я добавил ниже CSS для переопределения начальной загрузки .rounded в моем тесте Codepen и получил тот же нежелательный результат. Вы, должно быть, сделали что-то подобное. Однако я до сих пор не вижу, чтобы это происходило здесь, на SO.
.rounded {
border-radius: 1rem !important;
}
Лучшим вариантом действительно было бы создание определенного макета карты для изображений (как прокомментировал ОП, «карта в карте») и использование начальной загрузки .rounded или пользовательского класса с набором border-radius.
.card {
/* added for test */
padding: 1rem; margin: 1rem; outline: 1px solid black;
/**/
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #f5f5f5;
background-clip: border-box;
border: 0.0625rem solid #e5e7eb;
border-radius: 1rem;
}
.rounded {
border-radius: 1rem !important;
}<html>
<head>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel = "stylesheet" />
</head>
<body>
<h3>only .card > .rounded</h3>
<div class = "card">
<img class = "rounded" src = "https://picsum.photos/id/237/300/200">
</div>
<h3>OP code with full bootstrap CSS (5.0.2)</h3>
<div class = "card border-0 p-3 p-md-3 p-lg-4 mb-3">
<div class = "row pb-4 text-left">
<div class = "col-1 ps-1">
<h1 class = "id-circle">B</h1>
</div>
<div class = "col-11">
<span class = "description details-text pe-1">Text</span>
</div>
</div>
<div class = "row gy-3 mb-1 pb-0">
<div class = "col-lg-6 col-md-6 col-sm-6 pb-0">
<div class = "row pt-0 pb-0 image-row">
<img class = "rounded" src = "https://picsum.photos/id/237/300/200">
</div>
</div>
</div>
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
</body>
</html>Это полностью помогло мне. Когда я переопределяю bootstrap .rounded, я получаю нежелательный результат. Таким образом, решение состояло в том, чтобы сделать каждое изображение картой внутри большой карты.
Нет ничего плохого в вашем CSS как есть. Простой
<div class = "card">card</div>показывает красивые закругленные границы. Пожалуйста, опубликуйте минимальный воспроизводимый пример, показывающий нежелательный результат...