Come posso evitare di un'immagine da traboccante una scatola angolo arrotondato?

Question

Se io uso questo codice, l'immagine non viene ritagliata dai div di angoli arrotondati (con conseguente angoli quadrati della immagine che coprono fino quelli arrotondati del div):

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

Qualcuno sa come ottenere un div Corder arrotondata per evitare che l'immagine di un bambino da traboccante?

Answer 1

Questo può o non può funzionare nella vostra situazione, ma considerare l'immagine di sfondo CSS. In FF3, il seguente funziona bene:

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

Non sono sicuro che ci sia un'altra soluzione - se si applica un bordo per l'immagine stessa (ad esempio, 1em di profondità), si ottiene lo stesso problema di angoli quadrati

.

Modifica , anche se, nel caso "l'aggiunta di un bordo all'immagine", l'inserto di immagini è corretta, è solo che l'immagine non è a filo con l'elemento div. Per verificare i risultati, aggiungere style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" al tag img (con width e height impostare in modo appropriato, se necessario).

Answer 2

La mia ultima Chrome, Firefox e Safari Clip l'immagine border-radius del contenitore (come previsto).

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

In Firefox 15, vedo l'immagine ritagliata quando il contenitore ha {overflow: hidden}. (Ritaglio di contenuti bambino sembra essere stato aggiunto Gecko 2.0. )

In Chrome 23 e Safari 5, vedo l'immagine ritagliata solo quando il contenitore ha {position: static; overflow: hidden} e l'immagine ha {position: static}.

Answer 3

Anche quando overflow è impostato su hidden, border-radius non ritaglia il suo contenuto. Ciò è di progettazione.

Una soluzione potrebbe essere quella di impostare border-radius sull'immagine, così come il suo contenitore.

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

Un altro modo sarebbe quello di impostare l'immagine come sfondo del contenitore utilizzando background-image; ma ci sono problemi con questo metodo in Firefox prima versione 3 (cfr questo bug ) - non che quel bisogno si infastidito troppo

.

Answer 4

Prova questa soluzione:

1. L'immagine nel tag img è presente e ci si impostare la larghezza e l'altezza.
2. Poi nasconderlo con visibility:hidden. La larghezza e l'altezza rimangono intatti.
3. Dopo che avrete impostato la stessa fonte immagine di sfondo come sarà ritagliato.

<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 5

C'è anche ora background-clip nella CSS3. Funziona in tutti i principali browser. Le opzioni sono border-box, padding-box e dei contenuti-box. Nel tuo caso, credo che si vorrà utilizzare padding-box.

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

Answer 6

Se si effettua l'immagine di un'immagine invece di contenuti di sfondo, l'immagine non sarà agganciare gli angoli arrotondati (almeno in FF3).

Si potrebbe anche aggiungere un padding al div, o il margine per l'immagine di aggiungere imbottitura extra tra il bordo arrotondato e l'immagine.

Answer 7

Una semplice border-radius sul cartellino img funziona bene nelle versioni correnti di Safari 5, Chrome 16, Firefox 9:

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

Answer 8

Credo che questo problema si verifica quando l'immagine o il genitore dell'immagine è position: absolute. Questo è comprensibile come l'impostazione assoluta prende l'elemento fuori dal flusso del documento.

Sono sicuro al 90% che ho visto una correzione per questo, mi aggiornerò questo post quando lo faccio: D

Answer 9

Il ritaglio in più è di solito solo all'interno del margine di errore lo spessore del bordo. Basta lasciare il raggio interno sia leggermente inferiore in modo che il margine di errore ricade sotto il confine anziché accanto è

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

Answer 10

È necessario specificare una larghezza esatta e l'altezza con overflow: hidden, se si desidera che il div per ritagliare l'immagine