Bilder in einem Rahmen zoomen

[Rolf B]

Hallo Linuchs,

wenn Du einen gezoomten Ausschnitt eines img in einen Rahmen setzen willst, dann würde ich außer dem Rahmen-div, das den Ausschnitt maskiert, das Bild noch passend verschieben:

<figure>
<figcaption>Blüte einer gelben Osterglocke, aus Wikimedia Commons. </figcaption>
<div>
<a href="https://commons.wikimedia.org/wiki/File:Narcissus_pseudonarcissus_030405.jpg">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f2/Narcissus_pseudonarcissus_030405.jpg">
</a>
</div>
<footer>Das Bild stellt einen Link dar und verweist auf die Herkunftsinformationen</footer>
</figure>

Und im CSS

figure div {
  width: 500px; height: 350px;
  overflow: hidden; 
}

figure div img {
  position:relative;
  width: 250%;
  top: -95%; left: -75%; 
}

Die Größensteuerung und Positionierung kann man mit Pixeln und Prozenten machen. Beides hat Vor- und Nachteile.

Bei Prozenten skaliert das Bild mit dem Container-DIV. Du musst lediglich darauf achten, dass das Aspect Ratio unverändert bleibt, sonst verschiebt sich der Ausschnitt.

Bei Pixeln bist Du vom Aspect Ratio unabhängig, der Inhalt skaliert aber nicht. Statt dessen wird der Ausschnitt größer oder kleiner.

Ich würde Prozente empfehlen.

Und ich hoffe, der Creative Commons Lizenz Genüge zu tun, wenn ich das so darstelle.

Rolf