Warum erscheinen meine kreisförmigen Bilder in Safari beschnitten und wie kann ich das beheben?

Problem mit abgerundeten Ecken (Randradius) in Safari

Safari-Benutzer können auf ein eigenartiges Verhalten stoßen, wenn sie versuchen, kreisförmige Bilder mithilfe des Randes zu erstellen. Radius-Eigenschaft. Dieses Problem ist auf Safaris einzigartige Interpretation der Rahmenrundung zurückzuführen, die sich von anderen Browsern unterscheidet.

Problemerklärung:

Beim Anwenden eines Rahmens auf ein Element erweitert Safari die Elemente Passen Sie die Abmessungen an, um die zusätzliche Randbreite zu berücksichtigen. Diese Erweiterung wirkt sich auch auf die Anwendung abgerundeter Ecken aus und führt dazu, dass diese von der äußeren Grenze des Elements und nicht vom enthaltenen Bild abgeschnitten werden.

Lösung:

Zu überwinden Bei diesem Problem ist es wichtig, den Rand vom Bild zu trennen, indem das Bild in einem Container platziert wird. Auf diese Weise können Sie einen Randradius sowohl auf den Container als auch auf das Bild anwenden und so eine konsistente Kreisform sicherstellen.

Codebeispiel:

<div class="activity_rounded"><img src="image.jpg" /></div>

.activity_rounded {
  display: inline-block;
  border-radius: 50%;
  border: 3px solid #fff;
}

.activity_rounded img {
  border-radius: 50%;
  vertical-align: middle;
}

Mithilfe dieser Technik können Sie Bilder mit kreisförmigen Rändern erstellen, die in Safari korrekt angezeigt werden und in verschiedenen Browsern einheitlich bleiben.

Das obige ist der detaillierte Inhalt vonWarum erscheinen meine kreisförmigen Bilder in Safari beschnitten und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!