Bild mit Maus vergrößern

[akapuma]

Hallo,

ich habe auf meiner Website Bilder, die sich beim Draufklicken vergrößern. Das mache ich so:

      .image-left {
    transition: transform 0.7s;
    float:left;
    margin-right: 10px;
    }

      .image-left:active {
    transform: translate( 225px, 0px) scale(2, 2);

 <img class="image-right" src="res/paella/paella_in_stahlpfanne.jpg" alt="Paella in Stahlpfanne"
        title="Paella in Stahlpfanne" style="max-width: 300px; width: 30%;">

Ein linksbündiges Bild vergrößert sich beim draufklicken und verschiebt sich nach rechts. Problem: wenn das Fenster sehr klein ist, dann verschiebt es sich zu viel. Abhilfe schafft folgende Änderung:

 .image-left:active {
    transform: translate( min(25vw,225px), 0px) scale(2, 2);
    }

Mit Chrome und Edge und FireFox funktioniert das einwandfrei, allerdings nicht mit Seamonkey und dem Internet-Explorer.

Kann ich es irgendwie ändern daß es auch mit den beiden alten Browsern funktioniert?

Gruß

akapuma

 

[Oliver77]

Also Internet-Explorer kannst du ignorieren, der ist nicht mehr up to date, jetzt gibt es Edge und der unterstützt transform.

 

[tk1234]

Also Internet-Explorer kannst du ignorieren, der ist nicht mehr up to date, jetzt gibt es Edge und der unterstützt transform.

das kompilierte Sicherheitsrisiko (aka Internet Explorer) ist tot. Mausetot. Es bringt nichts in einen nicht mehr unterstützten "Browser" auch nur 2 Minuten Zeit zu investieren - vergiss einfach dass es ihn mal gab.
Seamonkey ist aber wohl nicht viel besser: zwar gibt es wohl immer noch neue Versionen, die basieren aber immer noch auf der 5 Jahre alten Firefox-Version 60.8 welche min() nicht kennt - Seamonkey kannst du also auch ignorieren.

 

[akapuma]

Hallo,

danke für Eure Antworten.

Ich kenne ja nicht alle Endgeräte die meine Website aufrufen, deshalb probiere ich folgende Browser aus:

- Chrome
- Chrome mit der App "Mobiler Simulator – reaktionsschnelles Testtool"
- Chrome, Syntaxcheck mit der App "HTML Validator"
- Edge
- Edge im Internet-Explorer-Modus
- FireFox
- Seamonkey (Gecko 91)

Vielleicht ist das übertrieben (insbesondere der IE und Seamonkey), die Anpassungen hielten sich allerdings bisher in Grenzen.

Ich verwende jetzt folgenden Code der ohne min auskommt und akzeptabel ist:

      .image-left:active {
    transform: translate( 20vw, 0px) scale(2, 2);
    }

Gruß

akapuma

 

[Rolf B]

Hallo akapuma,

translate(20vw) verschiebt das Bild um 20% der Viewportbreite nach rechts.

Hast Du schon einmal versucht, mit transform-origin zu arbeiten? Per Default liegt der bei 50% 50%, also im Zentrum des Bildes. Du könntest ihn auf 25% 50% setzen, so dass das Bild stärker nach rechts als nach links wächst. Ggf. musst Du mit dem X-Wert etwas experimentieren.

Rolf