Bild innerhalb eines Containers vergrößern

[Andreas Vogt]

Hallo,

ich habe 3 Container nebeneinander, im mittleren und rechten nochmals 2 übereinander. in jedem Container ist ein Bild mit den Eigenschaften height:100% weite:auto

Und dies möchte mittels css innerhalb des Containers vergrößern, aber ohne dass das Bild die Containergrenzen sprengt. Das Vergrößern mache ich jetzt mittels div.rightFrame img:hover und height:120%

hat jemand einen Tip für mich wie das geht? Gruß Andreas

[Lars]

Hallo Andreas,

meinst du das so? → https://codepen.io/LArs96/pen/QWWGMaE

Gruß Lars

[Andreas Vogt]

Hallo Lars,

ja schon so, aber wenn ich die Bilder vergrößere mittels img.hover: 120% sprengt das Bild den Container.

Gruß Andreas

[Andreas Vogt]

Hallo Lars, habe eine Lösung gefunden mittels Javascript mittels

function zoom(z, id) {
 document.getElementById(id).style.transform=" scale("+z+", "+z+")";
 document.getElementById(id).style.width=(z*100)+"%";
}

<img id="img4" onmouseout="javascript:zoom(1, 'img4')" onmouseover="javascript:zoom(1.5, 'img4');" src="..." />

Und noch ein paar Styleanweisungen. Die abgewandelte Lösung stammt hier von: Werner Zenk Bilder Zoom

Gruß Andreas

[Raketenwissenschaftler]

Hallo Andreas!

Die gezeigte Lösung ist stark suboptimal. Deshalb hat das irgendwer bewertet, leider ohne das zu begründen und damit also manchen ratlos zurückgelassen.

Dabei störe ich mich nicht daran, dass dem Bild nichts mitgegeben wurde, was Blinden (oder Personen, die aus anderen Gründern einen "Reader" benutzen, oder auch nur Suchmaschinen) weiterhilft, denn das halte ich für eine Folge des Modellcharakters Deiner, nunja, "Lösung".

Vielmehr an Folgenden:

1. Das komplette Vorhaben ist komplett in reinstem CSS realisierbar. :hover ist ein Ansatz, den Du auf der von Dir verlinkten Seite sogar gesehen haben solltest. Unnötiges Javascript sollte man unbedingt vermeiden.
2. "onmouseover" und "onmouseout" sollten - wenn schon das (für Dich zwar "mit Ach und Weh funktionierende" aber falsche) Javascript verwendet wird - durch bessere Methoden der Zuweisung eines Eventhandlers erfolgen.
3. Die von Dir verlinkte Seite ist sicherlich ganz nett und gut gemeint. Hat aber leider den Nachteil, dass die empfohlenen Vorgehensweisen "nicht ganz ins Jahr 2019 passen" und "mal überarbeitet werden" müssen.
4. Ich bezweifle, dass die vo Dir vorgestellte Lösung wirklich im Sinne Deiner Aufgabenbeschreibung funktioniert Hast Du clip vergessen?. Ein setzen des Overflows für den die Grafik enthaltenden Container könnte es auch, wenngleich auf eine "nicht immer genügende Weise" tun.

[Raketenwissenschaftler]

5. kommt noch hinzu:

onmouseout="javascript:zoom(1, 'img4')" 

Also, auf das "onmouseout", welches nicht mehr verwendet werden sollte, folgt "javascript:". Zum einen ist das "hyperliquid" (und ich weiß gar nicht, ob das überhaupt funktioniert - nur dass man SOWAS anno 1998 bei Links im href notierte - und dann hier im Forum fragte warum die Seite neu geladen wird...). Zum Anderen ist "Inline-Javascript" keine gute Lösung und wird von sicherheitsbewussten "Webmastern" gerne verboten.

[Der Martin]

Hallo,

5. kommt noch hinzu:

onmouseout="javascript:zoom(1, 'img4')" 

Also, auf das "onmouseout", welches nicht mehr verwendet werden sollte, folgt "javascript:". Zum einen ist das "hyperliquid" (und ich weiß gar nicht, ob das überhaupt funktioniert ...

keine Sorge, es "funktioniert" - in dem Sinn, dass es nichts bewirkt. Ein gültiger Bezeichner am Zeilenanfang, gefolgt von einem Doppelpunkt, ist eine Sprungmarke, so dass man diese Stelle mit einem goto anspringen könnte.

Nur dass a) die goto-Anweisung AFAIK in JS nie implementiert wurde und b) eine Sprungmarke an dieser Stelle sowieso nutzlos wäre.

Davon abgesehen stimme ich deinem Beitrag zu.

Ciao,
 Martin

[JürgenB]

Hallo,

… :hover …

… "onmouseover" und "onmouseout" …

wobei nicht vergessen werden sollte, das viele Seitenbesucher, wenn nicht sogar die meisten, ohne Maus unterwegs sind. Ich nehme da z.B. fokussierbare Elemente und dann zusätzlich :focus.

Frage an die A11Y-Experten: würde hier ein tabindex und evtl. ein entsprechendes Aria- oder role-Attribut am img reichen?

Gruß
Jürgen

[Lars]

Hallo Andreas,

das ist ja auch klar, denn dann nimmt das Bild 20% mehr Platz ein, als zur Verfügung steht. Deswegen habe ich die Größenangabe auch auf 100% gesetzt. Du kannst natürlich auch img{width:90%;margin:5%;} machen und dann per img:hover{width:100%} das Bild zur vollen Größe skalieren. https://codepen.io/LArs96/pen/QWWGMaE

Gruß Lars

[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