[FRAGE] Responsive IMG in DIV

[gruenstich64]

Hallo liebe Community,

ich baue gerade eine Parallax Scrolling Website, auf der ein paar Gegenstände beim Scrollen mitfliegen.
Allerdings möchte ich, dass die Seite responsive für zwei verschieden große Viewports ist - das prüfe ich mit Javascript und wende je nach Fall zwei verschiedene externe CSS an. Klappt auch.

Jetzt habe ich allerdings noch besagte Gegenstände, die sich natürlich auch anpassen sollen.
Ohne responsive sind die folgendermaßen eingebunden:

<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
<div class="wrapper">
<img src="1125px/Room1/sofa.png" data-stellar-ratio="2" data-stellar-vertical-offset="-20">	
</div>
</div>

Ich habe schon zwei Varianten probiert, um eine große und kleine Version der Bilder anzeigen zu lassen, aber es hat nicht geklappt:

Versuch 1 - das hat bei einem anderen Projekt super funktioniert, keine Ahnung warum es hier nicht klappt.

<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
<div class="wrapper">
<img src="1125px/Room1/sofa.png" data-stellar-ratio="2" data-stellar-vertical-offset="-20">
    <source src="1125px/Room1/sofa.png" media="min-height:1125px">
    <source src="768px/Room1/sofa.png" media="max-height:1124px"></img>
</div>
</div>

Versuch 2 - hier wollte ich das img über das CSS steuern

<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
<div class="wrapper">
<div id="slide2-1" data-stellar-ratio="2" data-stellar-vertical-offset="-20"> </div>
</div>
</div>

CSS (jeweils einmal in large.css und small.css, was ja dann per Javascript aufgerufen wird)

#slide2-2 {
	position:absolute;
	height: 395px;
	width: 963px;
	top: 582px;
	left: 234px;
	background-image:url(../1125px/Room1/sofa.png);
	background-repeat:no-repeat;
}

Ich hoffe jemand hat einen Vorschlag Es muss halt weiterhin gewährleistet sein, dass

data-stellar-ratio="2" data-stellar-vertical-offset="-20"

funktioniert.

Vielen Dank!
Liebe Grüße,
gruenstich

 

[kkapsner]

Ein <img> darf keine Elemente enthalten. Deswegen ist dein Ansatz mit <source> invalides HTML und es wundert mich, dass das mal funktioniert hat.

Aber du könntest doch dein erstes HTML verwenden und dann in den CSS-Dateien über #slide2 img das Bild ansprechen und entsprechend umskalieren.

 

[gruenstich64]

Die Lösung mit dem Source hatte ich hier her : Responsive Img Tags

Ich habe tatsächlich nicht daran gedacht, einfach width und height anzusprechen im CSS
Manchmal liegt es so nah dass man nicht drauf kommt! Bin aber auch noch neu in der ganzen Sache.
Vielen Dank für diesen Hinweis, ich werde es ausprobieren und mich bei Problemen noch mal hier melden

 

[kkapsner]

Ah... das <source> wird dann von JS ausgelesen und nicht vom Browser interpretiert... wirklich schön ist das aber auch nicht, da z.B. der Firefox das <source> dann nicht als Kind in das <img> packt (was ja auch nicht geht, da das invalide wäre), sondern direkt dahinter ins DOM packt.

Manchmal ist man einfach zu nahe am Problem um die einfachste Lösung zu sehen... ja - melde dich, wenn du nochmal Probleme hast.