Làm cách nào để ngăn hình ảnh tràn ngập hộp góc tròn với CSS3?

Question

Nếu tôi sử dụng mã này, hình ảnh không được cắt bớt div của góc tròn (kết quả là góc vuông của hình ảnh bao che cho những người tròn của div):

<div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;"> 
    <img src="big-image.jpg" /> 
</div> 

Có ai biết làm thế nào để có được một corder tròn div để ngăn chặn một hình ảnh trẻ em bị tràn?

Answer 1

Điều này có thể có hoặc không hoạt động trong tình huống của bạn, nhưng hãy cân nhắc tạo hình ảnh nền CSS. Trong FF3, các công việc sau tốt:

 
<div style=" 
    background-image: url(big-image.jpg); 
    border-radius:  1em; 
    height:    100px; 
    -moz-border-radius: 1em; 
    width:    100px;" 
></div> 

Tôi không chắc chắn có một workaround — nếu bạn áp dụng đường viền cho hình ảnh bản thân (nói, 1em sâu), bạn sẽ có cùng một vấn đề của góc vuông.

Chỉnh sửa: mặc dù, trong trường hợp "thêm đường viền cho hình ảnh", hình ảnh inset là chính xác, nó chỉ là hình ảnh không được tuôn ra với phần tử div. Để xem kết quả, hãy thêm style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" vào thẻ img (với width và height đặt thích hợp, nếu cần).

Answer 2

Nếu bạn đặt hình ảnh thành hình nền thay vì nội dung, hình ảnh sẽ không cắt các góc tròn (ít nhất là trong FF3).

Bạn cũng có thể thêm đệm vào div hoặc lề cho hình ảnh để thêm phần đệm thừa giữa đường viền được làm tròn và hình ảnh.

Answer 3

Bạn cần phải xác định một chiều rộng chính xác và heigth với overflow: hidden, nếu bạn muốn div của bạn để cắt hình ảnh của bạn

Answer 4

Ngay cả khi overflow được thiết lập để hidden, border-radius không cắt nội dung của nó. Điều này là do thiết kế.

Một giải pháp là đặt border-radius trên hình ảnh cũng như vùng chứa của hình ảnh.

<div style="border-radius: 16px; ..."> 
    <img src="big-image.jpg" style="border-radius: 16px; ..." /> 
</div> 

Một cách khác là đặt hình ảnh làm nền của vùng chứa bằng cách sử dụng background-image; nhưng có vấn đề với phương pháp này trong Firefox trước phiên bản 3 (xem this bug) - không phải điều đó cần làm phiền bạn quá nhiều.

Answer 5

Hãy thử cách này:

1. Những hình ảnh trong img thẻ hiện diện và ở đó bạn thiết lập chiều rộng và chiều cao.
2. Sau đó ẩn nó với visibility:hidden. Chiều rộng và chiều cao vẫn nguyên vẹn.
3. Sau đó, bạn sẽ đặt cùng một nguồn làm hình nền, hình ảnh sẽ được cắt bớt.

<a class="thumb" href="#" style="background-image: url('./img/pic1.jpg');" title="Picture"> 
    <img border="0" src="./img/pic1.jpg" alt="Pic" height="100" width="150" /> 
</a> 

#page .thumb { 
background-repeat: no-repeat; 
background-position: left top; 
border: 3px #e5dacf solid; 
display: block; 
float: left;} 

#page .thumb img { 
display: block; 
visibility: hidden;} 

Answer 6

My mới nhất của Chrome, Firefox và Safari clip hình ảnh để border-radius của container (như dự định).

http://jsfiddle.net/RQYnA/12/embedded/result/

Trong Firefox 15, tôi thấy hình ảnh cắt bớt khi container có {overflow: hidden}. (Clipping nội dung con dường như đã được added in Gecko 2.0.)

Trong Chrome 23 & Safari 5, tôi thấy hình ảnh cắt bớt chỉ khi container có {position: static; overflow: hidden} và hình ảnh có {position: static}.

Answer 7

Một đơn giản border-radius trên thẻ img hoạt động tốt trong các phiên bản hiện hành của Safari 5, Chrome 16, Firefox 9:

<div> 
    <img src="big-image.jpg" style="border-radius: 1em;" /> 
</div> 

Answer 8

Tôi nghĩ rằng vấn đề này xảy ra khi các hình ảnh hoặc cha mẹ của hình ảnh là position: absolute. Điều này là dễ hiểu vì thiết lập tuyệt đối đưa phần tử ra khỏi luồng của tài liệu.

Tôi 90% chắc chắn tôi đã nhìn thấy một sửa chữa cho điều này, tôi sẽ cập nhật bài này khi tôi làm: D

Answer 9

Ngoài ra còn có hiện background-clip trong css3. Nó hoạt động trong tất cả các trình duyệt chính. Các tùy chọn là hộp viền, hộp đệm và hộp nội dung. Trong trường hợp của bạn, tôi nghĩ bạn sẽ muốn sử dụng padding-box.

-webkit-background-clip: padding-box; 
-moz-background-clip: padding; 
background-clip:   padding-box; 

Answer 10

Cắt xén bổ sung thường chỉ ở lề độ dày của độ dày biên giới. Chỉ cần cho bán kính bên trong có hơi nhỏ hơn sao cho sai số thuộc biên giới thay vì bên cạnh là

<div style='border-radius:5px;border:thin solid 1px;'> 
    <img style='border-radius:4px' /> 
</div>