Opera, Bilder und border-radius

27.10.2011, 14:01 von Daniel || 0 Kommentare || Mit anderen teilen

Opera ist eigentlich für umfassende CSS3-Unterstützung bekannt. Bei der Eigenschaft border-radius in Zusammenhang mit Bildern ist die Implementation jedoch etwas unglücklich.

Wir haben folgendes Szenario

Ein Container, sei es ein div, enthält ein Bild, welches per img- Tag eingebunden ist.

<div class="container">
  <img src="pfad/zum/bild.jpg" alt="Mein Bild">
</div>

Das div hat abgerundete Ecken, die wie folgt definiert sind:

.container {
  border:1px solid red;
  -moz-border-radius:2em; -webkit-border-radius:2em; border-radius:2em;
}

Damit der Inhalt, also das oben besagte Bild, nicht aus dem Container heraus ragt, bekommt dieser noch die begrenzenden Werte

.container {
  display:inline-block;
  overflow:hidden;
  border:1px solid red;
 
-moz-border-radius:2em; -webkit-border-radius:2em; border-radius:2em;
}

zugewiesen.

Einer tritt immer außer der Reihe

Alle Browser, auch der IE9, zeigen den Inhalt wie erwartet an. Ein Container mit runden Ecken, dessen Inhalt in den Eckpunkten abgeschnitten wird.

Nur den Opera-Browser, von dem man ein solches Verhalten mit am wenigsten erwarten würde, interessiert das nicht. Das eingebettete Bild ragt an den Ecken über den Container hinaus. Auch in der gerade aktuellen Version 11.5.

Native Darstellung in Opera

Eine mögliche Lösung

... ist, dem Container per JavaScript das Bild als background-image zu geben. Damit hat der Opera keine Schwierigkeiten. Nichts einfacher als das.

Eine Umsetzung per jQuery sieht folgendermaßen aus:

if ($.browser.opera) {
  var jqueryElement = "container";
  var imgWidth = $("." + jqueryElement + " img").width();
  var imgHeight = $("." + jqueryElement + " img").height();
  var imgSrc = "url(" + $("." + jqueryElement + " img").attr("src") + ") no-repeat";

  $("." + jqueryElement).css({
    "width": imgWidth,
    "height": imgHeight,
    "background": imgSrc
  }).empty();
}

  1. In der 1. Zeile wird der Browser abgefragt. Diese Abfrage ist mitunter sehr wichtig, da der Safari mit dem Code anscheinend nichts anfangen konnte und gar nichts mehr darstellte.
  2. In den Zeilen 3-5 werden die Eigenschaften des Bildes abgespeichert. Um Schreibfehler zu vermeiden, habe ich den Selektor in eine eigene Variable gepackt und diese an den gegebenen Stellen eingesetzt.
  3. Anschließend wurden die gespeicherten Werte per css()- Methode dem Container zugewiesen (Zeilen 5-10) und
  4. Letztendlich das img- Tag mit empty() gelöscht.

Das mootools- Äquivalent

if (Browser.opera) {
  var mootoolsElement = 'container';
  var imgWidth = $$('.' + mootoolsElement + ' img').getStyle('width');
  var imgHeight = $$('.' + mootoolsElement + ' img').getStyle('height');
  var imgSrc = 'url(' + $$('.' + mootoolsElement + ' img').get('src') + ') no-repeat';

  $$('.' + mootoolsElement).set('styles', {
    width: imgWidth,
    height: imgHeight,
    background: imgSrc
  });
  $$('.' + mootoolsElement + ' img').dispose();
}

Die Umsetzung ist ähnlich wie bei jQuery, nur die Methoden- Namen unterscheiden sich.

Fazit

Geänderte Darstellung in Opera

Wie oben schon erwähnt, sollte auf jeden Fall darauf geachtet werden, den Browser abzufragen. Aus einem mir immer noch unerklärlichem Grund spielt der Safari im Zusammenhang mit jQuery hier nicht mit. Wer sachdienliche Hinweise zur Aufklärung hat, der möge sie der Allgemeinheit mit einem Kommentar zukommen lassen.

Schlüsselwörter zu diesem Beitrag

« zurück

Hier schreibe ich,

Ich

Daniel Erlinger, als selbstständiger Webdesigner über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Vernetzt

Twitter
Mister Wong
Contao Community

Kommentare



Nutze Deinen Gravatar.


Bitte addieren Sie 7 und 1.