How can you crop a photo with CSS?

Question

css

Hello everyone
There are photos, 600x400 (20 pieces). I need to make them round, that is border-radius: 50%. But, since it is not square, it looks bad. I can cut all of them with my hands in FS up to 400x400, but 20 pieces are so-so fun to click. Is there a solution with CSS?
Thanks

Answer 1

It is difficult to answer the question, since there are several solutions and they depend on the situation, but for example, you can try this:

.img {
   width: 400px;
   height: 400px; 
   object-fit: cover;
   object-position: center;
}

If you don't like object-fit support, you can achieve a similar effect using wrapping and overflow:hidden and transforms / positioning.

.wrapper {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
}
.img {
  transform: translateX(-100px); 
}

Well, there is also an option to make them using background-image.