img

mögliche Links:
http://volterra.bplaced.de/1.jpg (450[b] x 300[h])
http://volterra.bplaced.de/2.jpg (1000[b] x 940[h])
Beispiellogos:
https://www.designenlassen.de/blog/wp-content/uploads/2017/01/grafik6.jpg (751[b] x 168[h])
http://german.cri.cn/mmsource/images/2012/12/05/044130068ab84ca2ba4d7e61afa9a955.jpg (600[b] x 161[h])




Angaben mit Höhe und Breite > Welche Auswirkungen?

img {
width: 100%;
height: auto;
}


img {
max-width: 100%;
height: auto;
}


img {
min-width: 100%;
height: auto;
}


Wie kann ich Text über das Bild legen?

- neuer div und position?




> Hintergrundbild!






Bilder mit CSS passend auf Größe bringen mit object-fit

fill; contain; cover; scale-down; none



img {
     width: 200px;
     height: 200px;
     object-fit: fill;
}







div {
width: 100%;
height: 300px;
background-image: url('http://volterra.bplaced.de/1.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px dashed red
}





div {
width: 100%;
height: 300px;
background-image: url('http://volterra.bplaced.de/1.jpg');
background-repeat: repeat;
background-size: contain;
border: 1px dashed red
}





div {
width: 100%;
height: 300px;
background-image: url('http://volterra.bplaced.de/1.jpg');
background-size: 100% 100%;
border: 1px dashed red
}





div {
width: 100%;
height: 300px;
background-image: url('http://volterra.bplaced.de/1.jpg');
background-size: cover;
border: 1px dashed red
}





Auch ein Hintergrundbild kann verschoben werden mit background-position

(X-Achse Y-Achse)
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
50% 50%
25% 75%
10px 200px
50px 50px

center 200px



zur Fixierung des Hintergrundbilds im Element kann folgender Befehl im CSS eingegeben werden: background-attachment: fixed;

Beispiel:
background-image: url('http://volterra.bplaced.de/1.jpg');
background-color: #cccccc;
height: 500px;
width: 70%;
margin: 0 auto;
background-size: cover;
background-attachment: fixed;
background-position: center;



HeyHey

This is Pinus silvestris




Zoom per :hover




Zoom per :hover + Text

Bildtitel 1

Bildtitel 2