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])
<img src="LINK bzw. PFAD" width="" height="" alt="">
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! (siehe background)
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;
}
object-position
Es wird ein "Rahmen" um das Bild erzeugt, sodass man über das Element img eine background-color, einen border festlegen kann.
Jedoch kann das Bild von den Originalmaßen nicht verändert werden. Der "Rahmen" muss somit größer sein als die originalen Bildmaße!
Dann setzt man das auf object-fit: none; und es nimmt die Originalmaße ein und hat somit Abstand zum "Rahmen".
Mit object-position, kann nun Pixelgenau die Position angepasst werden, aber auch mit % und right/left top/bottom.
In Kombination mit object-fit (außer none,cover,fill) kann auch die Originale Bildgröße verändert werden, um einen kleineren "Rahmen" zu erzeugen, in dem das Bild bewegt werden kann.