Bild innerhalb eines Containers vergrößern

[Linuchss]

Hallo Andreas,

ich erstelle ab und zu Flyer (auf Papier) per HTML mit vorhandenen Bildern, aus denen ich einen Ausschnitt zeigen möchte.

Der Container "platzt" nicht, wenn du ihm eine Höhe und Breite gibst und overflow:hidden setzt.

Dann verschiebe ich das Bild im Container so, dass der gewünschte Ausschnitt sichtbar ist:

<div style="position:relative;width:100%;height:35mm;overflow:hidden;">
  <img src="img/landkarte.jpg" style="width:100%;height:80mm;margin-top:-15mm;" alt="Karte" />
</div>

<edit>position:relative ist entbehrlich, ich packe da noch ein absolut positioniertes Zielkreuz rein.</edit>

Nun könnte ich mit img:hover Breite und/oder Höhe des Bildes verändern, sogar die Ränder verschieben:

img:hover {
  width:120%;
  margin-top: -10%;
  margin-left: -10%;
}

... und wenn ich mich recht entsinne, kann man die Veränderung per CSS auch zeitlich verzögern, damit das Bild den Beschauer nicht "anspringt", sondern ihm freundlich entgegenkommt. Stichwort: transition:transform ..

Hgzh (Hoffe, geholfen zu haben), Linuchs