Page 2 of 2
Re: CP Bild mit Text: Bild statt src als BG
Posted: Tue 1. Jul 2014, 12:05
by 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?
Re: CP Bild mit Text: Bild statt src als BG
Posted: Tue 1. Jul 2014, 12:30
by nameless1
Oliver Georgi wrote: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.
Oliver Georgi wrote:Und warum dann nicht auch die height() berücksichtigen?
aufgrund des parallax effekts
Re: CP Bild mit Text: Bild statt src als BG
Posted: Tue 1. Jul 2014, 15:07
by update
nameless1 wrote:Oliver Georgi wrote: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.
Oliver Georgi wrote: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?
Re: CP Bild mit Text: Bild statt src als BG
Posted: Tue 1. Jul 2014, 15:40
by 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}");
Re: CP Bild mit Text: Bild statt src als BG
Posted: Tue 1. Jul 2014, 16:10
by update
Danke! Jetzt habe ich das Huhn schon mal bei den Schwanzfedern
Re: CP Bild mit Text: Bild statt src als BG
Posted: Sat 27. Sep 2014, 21:42
by 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;
}