В своем проекте я использовал карты bootstrap v.5. Я хотел сделать изображение идеальным кругом и использовал bootstrap class="rounded-circle", но выходное изображение имеет овальную форму. вот мой код

 <img src={elonMusk} class="card-img-top rounded-circle" alt={elonMusk} />

Как решить эту проблему

0
ruhul 11 Янв 2022 в 09:31
Можешь предоставить изображение
 – 
Dhruv
11 Янв 2022 в 09:33

6 ответов

Насколько я знаю, класс rounded-circle - это просто border-radius:50%. Итак, если размеры вашего изображения не равны (например, 50 x 50). вы не получите идеальный круг.

Вы можете дать своему изображению несколько width и height, чтобы исправить его размеры.

Любить :

img:{
    width:50px;
    height:50px
   }

Или

<img id="myImage" src=".." >

#myImage{
   width:50px;
   height:50px
}
1
Rahul Rahatal 11 Янв 2022 в 09:49

Создайте свой код CSS и удалите закругленный класс начальной загрузки.

<img src="elonMusk.png" class="card-img-top"  alt="elonMusk">

И в файле css

img {
  border-radius: 50%;
}

Используйте свойство border-radius, чтобы добавить к изображению закругленные углы. 50% сделает изображение круглым:

0
Pranavjeet.Mishra 11 Янв 2022 в 09:42

Просто используйте компонент карты из Bootstrap и обновите небольшой код для изображения Circle.

Документация по компонентам Bootstrap Card: https://getbootstrap.com/docs/5.1/components/card/

Уже обновлен фрагмент кода ниже, надеюсь, он вам поможет. Спасибо

.card .card-img-top {
  height: 140px;
  width: 140px;
}
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="card" style="width: 18rem;">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png" class="rounded-circle card-img-top mt-3 mx-auto img-thumbnail">
  <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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
0
Hassan Siddiqui 11 Янв 2022 в 12:09

Поставить равные высоту и ширину...

 <img src={elonMusk} class="card-img-top rounded-circle" alt={elonMusk} 
style={{height:"200px", width:"200px"}} />
0
Ryan M 11 Янв 2022 в 09:57

Вы можете использовать класс ratio ratio-1x1, который является предопределенным классом в Bootstrap-5, и если ваше изображение не в формате Square, вам нужно написать одну строку кода CSS, например object- подходит: обложка.

.img-cover{
  object-fit: cover;
  object-position: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container py-4">
  <div class="row g-4 row-cols-1 row-cols-sm-2 row-cols-md-3">
    <div class="col">
      <div class="card">
        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
          <img src="https://i.stack.imgur.com/fcbpv.jpg?s=256&g=1" class="card-img-top img-cover" alt="Raeesh">
        </div>
        <div class="card-body">
          <h5 class="card-title">Raeesh Alam</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>
          <a href="#" class="btn btn-primary">View More</a>
        </div>
      </div>
    </div>
  </div>
</div>
0
Raeesh Alam 11 Янв 2022 в 09:59