Cách làm ảnh tròn (avatar) đối với ảnh hình chữ nhật

[pham_an_97 (Khôi)]

Các bác cho em hỏi là có cách nào làm tròn ảnh (ảnh avatar) đối với ảnh hình chữ nhật đứng, nằm (trừ hình vuông vì làm tròn đc) ko ạ? vì ảnh hình chữ nhật mà làm tròn nó lại thành hình bầu dục ạ @@

[hungaya (Hung)]

Hình chữ nhật đứng

<div
  class="avatar"
  style="background-image: url('https://via.placeholder.com/100x200');"
>
</div>

.avatar {
  width: 100px;
  height: 200px;
  clip-path: circle(50px at 50% 50%);
}

Hình chữ nhật nằm

<div
  class="avatar"
  style="background-image: url('https://via.placeholder.com/300x150');"
>
</div>

.avatar {
  width: 300px;
  height: 150px;
  clip-path: circle(75px at 50% 50%);
}

[pwkeygen (Trịnh Tâm (fb.com/bboykeygen))]

border-radius: 50%;
overflow: hidden

Wtf clip-path làm gì vậy? :)))

[Sherly1001]

Của bạn đây,

Cách của bạn thì thớt cũng biết, nhưng đối với ảnh hình chữ nhật sẽ ra hình bầu dục, mà yêu cầu là hình tròn.

---

Còn đây là theo như @hungaya ca ca.

[pham_an_97 (Khôi)]

Em cảm ơn ạ …

[qloved (Quân)]

Chuẩn nhưng có gì đó sai sai. Sao lại phải set div là hình chữ nhật rồi lại bắt nó chỉ hiện ảnh là hình tròn. Sao không cho div vuông rồi border nó là hình tròn luôn nhỉ

[Sherly1001]

Vì ảnh set vốn có kích thước thuộc dạng hcn. Nếu set cố cho vuông thì

Ảnh sẽ bị méo, Trừ khi bạn cắt ảnh là hình vuông ngay từ đâu.

[qloved (Quân)]

Cách đó chẳng tốt hơn 1 tý nào. Thậm chí còn bị hiển thị sai nếu không set height hoặc width trùng với kích thước của ảnh. Mình hoàn toàn k cần dùng đến clip-path. Nếu bạn dùng với thẻ img thì dùng object-fit cũng cho kết quả tương tự clip-path nhưng khả năng tương thích vẫn tốt hơn.

Mức độ tương thích cũng tốt hơn nhiều:

[hungaya (Hung)]

Cám ơn nhiều nhiều, quên mất cái vụ background-position.
Mà cho mình hỏi thêm nữa, giữa cái object-fit và background-position, trường hợp nào thì ưu tiên sử dụng hơn nhỉ?