CSS rundete Ecken bei einem Bildproblem

8

Ich habe Probleme, die Ecken eines Img mit CSS3 zu runden:

Dies ist der Code, den ich verwende:

%Vor%

Wie Sie sehen können, ist der äußere Rand abgerundet, aber der tatsächliche img ist quadratisch. Wie kann ich mit CSS3 auch die Ecken des eigentlichen Bildes abrunden?

    
Rob 28.07.2011, 09:22
quelle

3 Antworten

14

Verwenden Sie zwei Container, beide mit den abgerundeten Ecken (nicht img ), und vergessen Sie nicht den overflow: hidden auf dem inneren:

Beispielcode hier: Ссылка

    
jackJoe 28.07.2011, 09:38
quelle
3

Eine ähnliche Antwort auf die vorherigen zwei. Verwenden Sie einen Bereich um das Bild und wenden Sie den Rahmen-Radius auf beide an.

Es gibt eine detailliertere Walkthrough hier: Ссылка

Einige Browser fangen an, dies besser zu handhaben, aber es gibt immer noch Fälle, in denen das Quadrat des Bildes durchscheint.

    
TheBozzMan 14.12.2012 18:50
quelle
1

Fügen Sie ein <div> um das Bild und wenden Sie die border-radius auf diesen Wrapper an. Fügen Sie overflow: hidden; hinzu und Sie können loslegen. Dies liegt daran, dass <img> -Tags keine abgerundeten Ecken haben können.

    
Karl Laurentius Roos 28.07.2011 09:25
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Ext-JS: Wie kann die Bearbeitung von Zellen für einzelne Zellen in einem Raster deaktiviert werden?