Как сделать картинку квадратной css

Для того чтобы сделать картинку квадратной в CSS, нужно использовать свойство width или height и задать для него одно и то же значение, равное ширине или высоте изображения, чтобы изображение не было искажено.

Например, если у нас есть изображение <img> с шириной 300 пикселей и высотой 200 пикселей, мы можем сделать его квадратным, задав одинаковые значения для ширины и высоты:

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

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

Если мы хотим обрезать лишнюю часть изображения, чтобы получить квадратную форму, можно использовать свойство object-fit. Например, можно задать значение «cover», которое будет растягивать изображение, чтобы оно заполнило всю рамку, при этом обрезая лишнюю часть:

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

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

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
}

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