Эффект CSS Resize/Zoom-In на изображении с сохранением размеров

Я хотел бы использовать переход CSS3 scale() для эффекта ролловера, но я хотел бы сохранить одинаковые размеры изображения ролловера. Таким образом, эффект заключается в том, что изображение увеличивается, но остается ограниченным существующей шириной и высотой.

img:hover {
    transform:scale(1.5);
    -ms-transform:scale(1.5); /* IE 9 */
    -moz-transform:scale(1.5); /* Firefox */
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -o-transform:scale(1.5); /* Opera */
}

Вот базовая скрипка для начала.

Но опять же, я хочу, чтобы изображение сохраняло ширину/высоту.

Я не женат на использовании шкалы css3. Может быть, есть лучший способ, изменив размер элемента.


html css rollover
person mtyson    schedule 18.03.2014    source источник

Ответы (1)


arrow_upward
60
arrow_downward

Этого можно добиться, просто заключив изображение в <div> и добавив overflow: hidden к этому элементу:

<div class="img-wrapper">
    <img src="..." />
</div>

.img-wrapper {
    display: inline-block; /* change the default display type to inline-block */
    overflow: hidden;      /* hide the overflow */
}

РАБОЧАЯ ДЕМО.

Также стоит отметить, что элемент <img> (как и другие встроенные элементы) находится на своей базовой линии. по умолчанию. И будет 4~5px пробел внизу изображения.

Этот вертикальный пробел принадлежит зарезервированному пространству выносных элементов, таких как: g j p q y. Вы можете решить проблему с выравниванием, добавив свойство vertical-align в изображение со значением, отличным от baseline.

Кроме того, для удобства пользователей вы можете добавить transition в картинки.

Таким образом, мы получим следующее:

.img-wrapper img {
    transition: all .2s ease;
    vertical-align: middle;
}

ОБНОВЛЕННАЯ ДЕМО.

person Hashem Qolami    schedule 18.03.2014
comment
Отличная идея. Я немного обновил его, чтобы добавить границу к обертке и установить высоту обертки: jsfiddle.net/ 7vY7v/2 (обтекание изображения было неплотным) - person mtyson; 19.03.2014
comment
@mtyson Как насчет добавления transition к изображениям? :) jsfiddle.net/hashem/7vY7v/3 - person Hashem Qolami; 19.03.2014
comment
Я хотел сделать что-то подобное, что было бы отзывчивым, но, конечно, в какой-то момент вам нужно ограничить контейнер, внутри которого масштабируется изображение... то есть не в процентах. - person landed; 06.08.2015