Bilder in einem Rahmen zoomen
bearbeitet vonHallo Linuchs,
wenn Du einen gezoomten Ausschnitt eines img in einen Rahmen setzen willst, dann würde ich das so machen:
~~~html
<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
~~~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_
--
sumpsi - posui - clusi