2013-12-21 4 views
1

Так что лучшее, что я мог найти, чтобы помочь иметь изображение увеличить чуть-чуть больше был этот код:Увеличение изображения с помощью CSS или JS

onmouseover="this.width=175;this.height=75;" onmouseout="this.width=150;this.height=50" 

Есть ли лучшая альтернатива, чтобы сделать его увеличить больше, как в вас может видеть это вместо изображения, просто просто перерисовывая его в сообщении?

Спасибо :)

+0

Если я вас правильно понял, вы хотите, чтобы изображение для увеличения плавно. Для этого вам нужны css3-переходы. – MultiplyByZer0

+0

@MistressDavid Да, плавный зум :) – user3124907

+0

Если вы имеете в виду плавное изменение размера изображения, он уже задал здесь JavaScript - Гладкое перемещение/изменение размера: http://stackoverflow.com/questions/4356312/javascript-smooth-movement-resizing –

ответ

3

Как насчет делать это с чистым CSS3 transition и transform путем масштабирования изображения ..

Demo

div { 
    position: relative; 
    margin: 100px; 
    height: 300px; 
    width: 300px; 
    border: 1px solid #515151; 
} 

img { 
    position: absolute; 
    padding: 5px; 
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    transition: all .5s; 
} 

div:hover img { 
    -moz-transform: scale(1.1,1.1); 
    -webkit-transform: scale(1.1,1.1); 
    transform: scale(1.1,1.1); 
} 

Вы можете обратиться мой ответ here для свойства масштабирования кросс браузера ,


Просто установите border элемента правильно, как Demo (из height и width к 310px из 5pxpadding со всех сторон)

Смежные вопросы