Verkleinern Sie das Bild mit CSS3

Question

Nehmen wir an, dass ich eine Animation zum Herauszoomen des Bildes machen muss. Dieses Bild wird vom Benutzer meiner Site gesetzt und ich kenne seine Größen nicht. So gibt es ein zufälliges Bild auf der Seite und wenn Besucher auf die Schaltfläche klicken, wird das Bild verkleinert (naja, das ist nicht wirklich was Ich suche, aber ich brauche diese Animation). JavaScript/jQuery wird verwendet nur in meinem Beispiel, um Sie wissen zu lassen, was ist mein Punkt.

Unter diesem Text können Sie meinen Code und Beispiel sehen. Mein Ziel ist, dass das Bild auf die Breite angepasst wird und Sie nicht seine volle Höhe sehen. Wenn Sie auf den "Toggle" Anker klicken, sollte das Bild so vergrößert werden, dass das Bild auf die volle Höhe skaliert und zentriert wird.

$(function() { 
 
    $('.toggle').click(function(e) { 
 
    e.preventDefault(); 
 
    $('#test').toggleClass('active'); 
 
    }); 
 
});

#test { 
 
    position: relative; 
 
    width: 500px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
} 
 
#test img { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100%; 
 
    height: auto; 
 
    transform: translate(-50%, -50%); 
 
    transition: all 5s; 
 
} 
 
#test.active img { 
 
    width: auto; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
    <img src="http://www.blueverticalstudio.com/wp-content/uploads/2011/05/1303508174-torre-europa-0180-500x1000.jpg" /> 
 
</div> 
 
<a href="#" class="toggle">Toggle</a>

Answer 1

Vielleicht ist es das, was Sie suchen?

#test.active img { 
    transform: scale(2,2); 
} 

Answer 2

Ich fand Übergänge mit Auto-Wert im Moment nicht arbeiten. Sie können dem Bild einfach einen Pixel/Prozentsatz oder eine Breite geben. Das wird funktionieren (nicht wie du möchtest, aber es wird animieren).

Nikita Vasilyev eine js Lösung für die automatische Wertproblem gemacht:

http://n12v.com/css-transition-to-from-auto/

Answer 3

Ich glaube nicht eine CSS einzige Weg gibt es, aber die Werte mit Javascript gesetzt und die CSS Übergang Griff lassen die Animation.

(Funktion init) Sie müssen etwas wie this anstelle von setTimeout implementieren (es ist nur so, dass Sie wissen, wenn die Bilder geladen sind) und dann führen Sie einige Berechnungen und speichern Sie diese Daten im img-Tag.

(function toggle) Dann ändern Sie einfach die Größe des Bildes entsprechend dieser "Zoom" -Daten;

Ich denke, dass der einfachste Weg ist, um die gewünschte Wirkung

$(function() { 
 
    
 
    function init(img){ 
 
    var sizes = { 
 
      iHeight: img.height(), 
 
      iWidth: img.width(), 
 
      pHeight: img.parent().height(), 
 
      pWidth: img.parent().width() 
 
     }; 
 
    sizes.prop = sizes.iWidth/sizes.iHeight; 
 
    img.data('zoom', false).data('sizes',sizes).width(sizes.iWidth).height(sizes.iHeight); 
 
    } 
 

 
    function toggleZoom(img){ 
 
    var hasZoom = img.data('zoom'), 
 
     sizes = img.data('sizes'); 
 
    if(!hasZoom){ 
 
     img.width(sizes.prop * sizes.pHeight).height(sizes.pHeight); 
 
    }else{ 
 
     img.width(sizes.iWidth).height(sizes.iHeight); 
 
    } 
 
    img.data('zoom', !hasZoom); 
 
    }; 
 
    
 
    setTimeout(function() { 
 
    init($('#test img')); 
 
    }, 300); 
 

 
    $('.toggle').click(function(e) { 
 
    e.preventDefault(); 
 
    // $('#test').toggleClass('active'); 
 
    toggleZoom($('#test img')); 
 
    }); 
 
});

#test { 
 
    position: relative; 
 
    width: 500px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
} 
 
#test img { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100%; 
 
    height: auto; 
 
    transform: translate(-50%, -50%); 
 
    transition: all 5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
    <img src="http://www.blueverticalstudio.com/wp-content/uploads/2011/05/1303508174-torre-europa-0180-500x1000.jpg" /> 
 
</div> 
 
<a href="#" class="toggle">Toggle</a>