background img mit height:auto

[bibifellow]

Ich habe folgenden code

<img src="bilder/zitat2.jpg" id="zitat2" alt="design" >

und css

img#zitat1 {
	
	max-width: 100%;
	height: auto;
	margin-bottom: 5%;
}

Das Bild verändert die Größe je nachdem wie groß der Browser ist perfekt.
Nun habe ich das gleiche mit

<referenzen>

<br><br>
<h5> Referenzen</h5><br/><br />
<div class="referenz">
<section>
<div id="icon">
<div class="bild1"></div>
<div class="bild2"></div>
<div class="bild3"></div>
<div class="bild4"></div>
<div class="bild5"></div></div>
</section></referenzen

und

.bild1 {
	float:left;
	width:100%;
	height:auto;
	margin-bottom: 1%;
	background-image: url(bilder/p1.jpg);
	  background-repeat:no-repeat;
	  background-size: cover;	
     -moz-background-size:cover;
     -webkit-background-size:cover;
		 }
.bild1:hover{
		

	background-image: url(bilder/p2.jpg);

}

versucht das klappt nicht bei auto zeigt er keine Bild an wenn ich height:300px; angebe zeigt er das Bild, aber wenn ich die website skaliere wird es verzerrt. Wie könnte die Lösung aussehen.

Ich möchte halt auf dem handy
bild1
bild2 usw. untereinander und später bei ca 400px die Bilder

bild1 bild 2 bild3
bild4 bild5 bild6

und bei hover das Bild austauschen. Ich habe es auch schon mit einer <ul> und <li> versucht aber das klappte auch nicht.

Wäre dankbar für ein paar Tipps

 

[cythux]

AW: background img mit height:auto

versuche es mal mit min height min-width

 

[Duddle]

AW: background img mit height:auto

Soweit ich weiß, muss irgendwas konkret die Größe definieren, wenn du das mit background-image machen willst.
Entweder

• dehnt der Inhalt das <div> oder
• das Elternelement ist konkret definiert und das <div> selbst passt sich daran an oder
• das <div> selbst ist konkret definiert (entweder durch height/width oder padding, das wäre cythux' Ansatz) oder
• eines der vorigen wird durch ein Script automatisch gemacht

Duddle

 

[bibifellow]

AW: background img mit height:auto

ist es denn möglich wenn

<img src="bilder/zitat2.jpg" id="zitat2" alt="design" >

ein image habe es beim hover ändern kann ohne als background-image.

 

[mwxx]

AW: background img mit height:auto

Ja mit 2 Javascript-Events im Image-Tag:
Beim Drüberfahren über das Bild :
onmouseover="this.src='pfad+name-des-hover-bildes'";
und beim Verlassen des Bildes:
onmouseout="this.src='pfad+name-des-originalbildes'";

Ich habe es jetzt nicht konkret geprüft: sollte 'this.src' an dieser Stelle nicht korrekt referenzieren, nimmst Du im Zweifelsfalle document.getElementById('zitat2').src

 

[Duddle]

AW: background img mit height:auto

Ich habe mal ein bisschen rumprobiert, weil ich die Standardlösungen nicht kenne und auch keine perfekte finde:


Das ist zwar nicht so elegant wie ich es mir wünschen würde (und die .bild1-Klasse usw. sollte eine ID sein), aber es funktioniert zumindest in meinem Chrome ganz okay.


Duddle

 

[bibifellow]

AW: background img mit height:auto

Das sieht super aus ganz genau wie ich es möchte. Super danke werde es gleich ausprobieren und berichten.

 

[bibifellow]

AW: background img mit height:auto

Das hat super geklappt. Ich hätte nur eine Frage

.referenzen > div

das habe ich noch nie benutzt dieses >div. Vllt magst du mir erklären was das auf sich hat. Ist es das gleiche wie

.referenz div

Noch noch einmal lieben Dank für die viele Mühe.

 

[Duddle]

AW: background img mit height:auto

Nein, die sind ähnlich, aber nicht gleich. Die Variante mit ">" wählt nur direkte Kindknoten aus. Die Variante ohne wählt Kindknoten innerhalb des Eltern-Elementes aus, egal in welcher Tiefe sie sind.

Siehe auch http://www.w3schools.com/cssref/css_selectors.asp


Duddle