Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:images [27.07.2020 12:03] – admin
+++ de:create:images [08.11.2024 15:22] (aktuell) – [Zoom-Funktion] admin
@@ Zeile 28: / Zeile 28: @@
 <code html>
 <div style="text-align: center; margin: 40px 0">
-  <img src="bild.jpg" alt="Bild einer Frau">
+  <img src="bild.jpg" alt="Bild einer Frau" style="max-width: 100%;">
 </div>
 </code>
@@ Zeile 35: / Zeile 35: @@
 <code html>
-<img src="bild.jpg" alt="Bild einer Frau" style="float: right; margin-left: 10px">
+<img src="bild.jpg" alt="Bild einer Frau" style="float: right; margin-left: 10px; max-width: 100%;">
 Bitte sehen Sie das Bild auf der rechten Seite genau an.
 Beurteilen Sie das Bild anschließend anhand der Aussagen, die Sie unten lesen.
@@ Zeile 43: / Zeile 43: @@
 <code html>
-<img src="bild.jpg" alt="Bild einer Frau" class="right">
+<img src="bild.jpg" alt="Bild einer Frau" class="right" style="max-width: 100%;">
 Bitte sehen Sie das Bild auf der rechten Seite genau an.
 </code>
@@ Zeile 127: / Zeile 127: @@
 <code html>
 <p>Text über dem Bild.</p>
-<p><img src="bild.gif" alt="Rosa Elefant"></p>
+<p><img src="bild.gif" alt="Rosa Elefant" style="max-width: 100%;"></p>
 <p>Text unter dem Bild</p>
 </code>
@@ Zeile 135: / Zeile 135: @@
 <code html>
 <h1>Willkommen</h1>
-<p><img src="https://www.soscisurvey.de/homepage/sosci.logo.png" alt="SoSci Survey" class="right">
+<p><img src="https://www.soscisurvey.de/homepage/sosci.logo.png" alt="SoSci Survey" class="right" style="max-width: 100%;">
 Dies ist ein Beispieltext, der demonstriert, wie ein Bild
 rechts vom Text platziert werden kann.</p>
@@ Zeile 170: / Zeile 170: @@
 {{scr.images.labels.result.png?nolink|Bilder in Skalen-Beschriftung}}
+===== Zoom-Funktion =====
+SoSci Survey stellt CSS-Klassen zur Verfügung, damit Sie für Bilder eine einfache Vergrößerungsfunktion nutzen können. Ergänzen sie dafür ein ''<a>''-Tag mit der Klasse ''s2zoom2x''. Im Bild selbst legen sie per ''style''-Attribut eine Verkleinerung fest.
+<code html>
+<a href="#" class="s2zoom2x"><img src="example.jpg" alt="" style="width: 80px"></a>
+</code>
+Das obige Beispiel vergrößert ein Bild sowohl bei Berührung mit der Maus (''hover'') als auch wenn es angetippt oder angeklickt wird (''focus''), weil es auf Touch-Devices (z.B. auf dem Smartphone) die Möglichkeit nicht gibt, mit dem Mauszeiger über ein Bild zu fahren.
+Falls das Bild nur auf die Mausberührung reagieren soll, können sie auch einfach nur die Klasse ''s2zoom2x'' ergänzen:
+<code html>
+<img src="example.jpg" alt="" style="width: 80px" class="s2zoom2x">
+</code>
+Die folgenden Klassen stehen zur Verfügung:
+  * ''s2zoom2x'' -- 2-fache Vergrößerung
+  * ''s2zoom3x'' -- 3-fache Vergrößerung
+  * ''s2zoom4x'' -- 4-fache Vergrößerung
+Für eine andere Vergrößerung können Sie den folgenden CSS-Code anpassen und in Ihrem Layout verwenden.
+<code css>
+a.s2zoom img,
+img.s2zoom {
+    transition: transform .2s;
+}
+a.s2zoom:focus img,
+a.s2zoom:hover img,
+img.s2zoom:hover {
+    transform: scale(1.6);
+    box-shadow: -0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.4);
+}
+</code>