Ich möchte mit radius-border aus einem rechteckigen Bild ein rundes Bild erstellen.
Gibt es eine einfache Möglichkeit, dies mit CSS zu erreichen, ohne das Bild zu verzerren UND sicherzustellen, dass ein Kreis perfekt rund ist?
Siehe Fehlversuche hier:
.rounded-corners-2{
border-radius: 100px;
height: 150px;
width: 150px;
Kann dies in nur CSS getan werden …..?
Benjamin
Dazu fügen Sie Ihrem img ein übergeordnetes div hinzu und der Code fließt wie folgt
figure{
width:150px;
height:150px;
border-radius:50%;
overflow:hidden;
}
Das Problem hier ist, dass das Bild nicht im Kreis zentriert ist.
– Web-Tiki
12. August 2014 um 15:13 Uhr
Ja, es funktioniert so, dass es das Bild tatsächlich zuschneidet, indem es die Größe Ihres übergeordneten div erbt.
– Benjamin
12. August 2014 um 15:14 Uhr
@web-tiki Sie können Ihr Bild positionieren, indem Sie diesem Link folgen jsfiddle.net/benjaminthomas/v8g3y0na/7
– Benjamin
12. August 2014 um 15:16 Uhr
Die Technik, die Sie verwenden, um das Bild im Container zu zentrieren, funktioniert nicht für alle Bilder. Wenn sie unterschiedliche Breiten haben, wird es fehlschlagen.
– Web-Tiki
12. August 2014 um 15:18 Uhr
URL @mbomb007 aktualisiert
– Benjamin
2. Mai 2019 um 8:50 Uhr
Roko C. Buljan
object-fitimg{
width:80px;
height:80px;
border-radius: 50%;
object-fit: cover;
}<img src="https://picsum.photos/id/1011/800/400">img mit HintergrundbildVerwenden Sie für ältere Browser die <img> Schild
<img alt="My image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
style="background: url(https://picsum.photos/id/1011/300/180) 50% / cover;
border-radius: 50%;
width:150px;">Der Trick besteht darin, ein transparentes Pixel für die festzulegen src (verhindern kaputtes Bild icon) und machen Sie das Beste, was CSS3 und background-size zu bieten haben (cover).
Ich habe alle Antworten auf dieser Seite gelesen und das ist bei weitem die klügste! Es ist auch das kompakteste. Und es verwendet kein Javascript! Und es verwendet kein CSS! Danke @Roko C. Buljan! Welches Bild ist hier enthalten? Mit welchem Tool wandelst du die Grafik in Base64-Code um? Danke +1!
– Sam
24. April 2017 um 7:47 Uhr
Vielen Dank! Nun, es verwendet tatsächlich CSS, wie Sie sehen können style=" was ofc am besten in ein separates Stylesheet gesteckt wird 🙂 Um ein Bild in base64 zu konvertieren, können Sie hier sehen: stackoverflow.com/a/17711190/383904 .
– Roko C. Buljan
24. April 2017 um 7:59 Uhr
@mbomb007 ja, es existiert (vielleicht war der Server gestern down) – Wie auch immer, der Code ist hier wichtig – man kann immer sein eigenes Bild verwenden, aber danke für die Meldung – jetzt können Sie Ihren Kommentar löschen …
– Roko C. Buljan
2. Mai 2019 um 13:11 Uhr
arielnmz
Gibt es eine einfache Möglichkeit, dies mit CSS zu erreichen, ohne das Bild zu verzerren UND sicherzustellen, dass ein Kreis perfekt rund ist?
Ja, und Sie können auch die Verwendung von übergeordneten Elementen vermeiden, indem Sie einfach das Bild als Hintergrund festlegen. Sie können das Bild auch beliebig positionieren, indem Sie die verwenden background-position Attribut.
Aktualisiert, um Bedenken hinsichtlich Größe, Rundheit, Schrägstellung und dynamisch geladenem Inhalt auszuräumen.
setTimeout(function() {
$("#image").css("background-image", "url(https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97350&w=150&h=350)");
}, 3000);#image {
display: block;
background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150");
border-radius: 200px;
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" />Ja, das funktioniert, wenn Breite und Höhe gleich sind, es sei denn, es wird schief
– Benjamin
12. August 2014 um 15:12 Uhr
@Benjamin Wie soll man sonst einen Kreis machen, wenn Breite und Höhe nicht gleich sind? Es ist das gleiche wie in Ihrem Beispiel, aber ohne ein übergeordnetes div zu verwenden.
– arielnmz
12. August 2014 um 16:02 Uhr
Alter, wir können ein Bild zu einem Kreis machen, wenn wir ein nichtlineares Bild skalieren, zum Beispiel wenn das Bild in 300 x 200, wenn wir die Größe bestimmen, schief aussieht. Ich denke, Sie wissen, was ich spreche. Nichts für ungut hier
– Benjamin
12. August 2014 um 16:04 Uhr
Das Bild befindet sich im Hintergrund, es spielt keine Rolle, welche Abmessungen das Bild hat, es ist niemals verzerrt.
– arielnmz
12. August 2014 um 16:07 Uhr
Deshalb habe ich vorgeschlagen, das Bild in den Hintergrund zu stellen und nicht in den src Attribut der img Element.
– arielnmz
12. August 2014 um 16:10 Uhr
KnightHawk
http://jsfiddle.net/o8fwpug5/37/
Dies ist ein kleines Update einer früheren Antwort. Die andere Antwort hat mir gefallen, aber diese ist etwas schlanker und gibt dem Wrapper eine pixelbasierte Breite. Auf diese Weise ist es einfacher, die Abmessungen für Ihre eigenen Zwecke zu sehen und zu ändern.
HTML:
<div><img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /></div>
CSS:
div{
height:200px;
width:200px;
position:relative;
border-radius:100%;
overflow:hidden;
}
img{
position:absolute;
left:-50%; right:-50%; top:0;
margin:auto;
height:100%; width:auto;
}
Setzen Sie einen DIV-Rahmen um das Bild: DEMO
<div class="rounded-corners">
<img src="http://welovekaleycuoco.com/wp-content/uploads/2013/11/Kaley-Cuoco-Wallpapers-81.jpg" width="200">
</div>
div.rounded-corners {
height: 150px;
width: 150px;
border-radius: 50%;
overflow: hidden;
}
Hinweis: Sie brauchen Ihren img.rounded-corners-Stil nicht mehr
Bemerken Sie von Ihrer Geige, dass Sie versuchen, ein rechteckiges Bild in einen Kreis einzupassen. Welchen Teil des Bildes möchten Sie verlieren?
– Paddy
12. August 2014 um 15:17 Uhr