Zoom breaks proportional...

Discussion in 'HTML & Website Design' started by mihaiDooH89, Dec 21, 2016.

0
  1. #1 
    <!DOCTYPE html> <html > <head> <style type="text/css"> .frame { height: 200px; width: 200px; overflow: hidden; } .zoomin img { height: 200px; width: 200px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; } .zoomin img:hover { width: 300px; height: 300px; } </style> </head> <body> <div class="zoomin frame"> <img src="img/zimage.png" title="Scale on Hover with Transition using CSS" /> </div> </body> </html>
    Code (markup):
    - See more at: http://www.corelangs.com/css/box/zoom.html#sthash.pXDIoCho.dpuf
    Code (markup):

    Hi i need help with this ... seems like when it zoom is not proportional! why? can somebody help me.!
     
    Last edited by a moderator: Dec 21, 2016
    mihaiDooH89, Dec 21, 2016 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    540
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #3
    Because you've set the image both width and height.
    If you want it to be proportional, you need to let go; either its width or height.
    Example:
    .zoomin img{
    width: 100%; /*relatively to parent .frame*/
    height: auto; /*allow it to adjust by itself*/
    transition: all 2s ease;
}
    Code (CSS):
     
    hdewantara, Dec 21, 2016 IP
    deathshadow likes this.