CP Bild mit Text: Bild statt src als BG

[Oliver Georgi]

Das ist absoluter Overkill!!! Unbedingt nur einen Pool an möglichen Auflösungen definieren! Und warum dann nicht auch die height() berücksichtigen?

[nameless1]

Das ist absoluter Overkill!!! Unbedingt nur einen Pool an möglichen Auflösungen definieren!

klingt logisch. allein schon um die cache funktionalität effektiv zu verwenden. 320, 480, 980, 1420, 1920 ist erstmal eingerichtet.

Und warum dann nicht auch die height() berücksichtigen?

aufgrund des parallax effekts

[update]

Das ist absoluter Overkill!!! Unbedingt nur einen Pool an möglichen Auflösungen definieren!

klingt logisch. allein schon um die cache funktionalität effektiv zu verwenden. 320, 480, 980, 1420, 1920 ist erstmal eingerichtet.

Und warum dann nicht auch die height() berücksichtigen?

aufgrund des parallax effekts

Naja, das sagt mir jetzt erstmal nicht so richtig was ("...ist erstmal eingerichtet...wg. Parallax....")
Wie wär's mal mit einem lebendigen Huhn?

[Oliver Georgi]

Um mal bei dem Codebeispiel zu bleiben:

Code: Select all

var currentWidth = $(window).width();
var imgWxH = 'normal';
var imgPool = {
    'small': {'w': 320, 'h': 240},
    'medium': {'w': 480, 'h': 360},
    'normal'': {'w': 980, 'h': 735},
    'large'': {'w': 1420, 'h': 1065},
    'xxl'': {'w': 1920, 'h': 1440}
};
if(currentWidth) {
    if(currentWidth < 480) {
        imgWxH = 'small';
    } else if(currentWidth < 980) {
        imgWxH = 'medium';
    } else if(currentWidth < 1420) {
        imgWxH = 'normal';
    } else if(currentWidth < 1920) {
        imgWxH = 'large';
    } else {
        imgWxH = 'xxl';
    }
}
$("#imgbck{IMAGE_ID}").attr("src","img/cmsimage.php/"+ imgPool[imgWxH]['w'] + "x" + imgPool[imgWxH]['h'] + "/{IMAGE_HASH}.{THUMB_EXT}");

[update]

Danke! Jetzt habe ich das Huhn schon mal bei den Schwanzfedern

[santscho]

Also.... Grundsätzlich ist Oliver's CSS-Lösung der richtige Ansatz für responsive Bilder. Allerdings wird bei dieser CSS-Steuerung ein 200px breites Bild in einem 400px breiten Muttercontainer auf die 400px vergrössert werden, was zu einer Verpixelung des Bildes führt.

Besser wäre:

Code: Select all

.my-cp-img-text-class img {
   max-width: 100%;
   height: auto;
}

In der Ausnahme-CSS für Internet Explorer noch den hier einfügen:

Code: Select all

.my-cp-img-text-class img {
  zoom: 1;
}

Nun hat aber FireFox ein Problem mit "max-width:", vor allem wenn sich das Bild in einem <td> befindet. Das Problem ist bekannt, aber das Firefox-Team hat noch keine Lösung für diesen "Bug". Es gibt aber einen Trick um dieses Problem in Firefox zu lösen. Und zwar mit einem einfachten CSS-Attribut für den Muttercontainer des Bildes:

Code: Select all

.my-cp-img-text-class {
	table-layout: fixed;
}