Bilder in einem Rahmen zoomen

[Linuchs]

Moin,

ich bin gerade dabei, für Garten-Pflanzen Steckbriefe zu machen.

In einem Container overflow:hidden erscheint das Bild, das ich mit left und top verschieben kann. Aber wie kann ich die Bildgröße verändern? img width bezieht sich ja auf das Eltern-Element, nicht auf das Bild.

Hier wollte ich das Bild etwas verkleinern, also herauszoomen mit width:90% um mehr Details im Ausschnitt sehen zu können:

Wie geht das?

Gruß, Linuchs

[JF]

Wenn ich Dein Problem richtig verstanden habe, würde ich es folgendermaßen lösen: Bette Dein <img>-Tag in ein <div> ein, welches overflow:hidden ist und die gewünschte feste Zielgröße hat. Jetzt solltest Du width und height vom <img>-Tag ändern können und den gewünschten Effekt erhalten. Eine Lösung direkt über das <img>-Tag ist mir leider auch nicht bekannt. Vielleicht kannst Du noch mit der Pixeldichte (https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/Grafiken) tricksen, allerdings habe ich sowas noch nicht ausprobiert.

Schöne Grüße JF

[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