Нужно img: парить, чтобы не повлиять на макет

Question

Нужно img: парить, чтобы не повлиять на макет

0

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

вот css

.gimg{
    height:85px;
    width:150px;
    float:left;
    margin: 10px 10px 10px 10px;
}
.gimg:hover{
    height:170px;
    width:300px;

Don Griffin 23 сен. 2013, в 23:53

Источник

Теги:

html

css

2 ответа

0

Вы можете уменьшить маржу соответствующим образом:

.gimg {
    height: 85px;
    width: 150px;
    float: left;
    margin: 10px 10px 10px 10px;
}

.gimg:hover {
    height: 170px;
    width: 300px;
    margin: -32px -65px -32px -65px;
}

Ry- 23 сен. 2013, в 19:21

Ещё вопросы

Terry · Accepted Answer · 2013-09-23T19-52-00.000Z

Используйте transform: scale(n) свойства CSS3 transform: scale(n):

.gimg:hover{
    transform: scale(2);     // You might want to add vendor
    transform-origin: 0 0;   // prefixes to these properties
}

Примечание. Если вы не хотите, чтобы изображение было развернуто централизованно (преобразовать начало в середину смазки), вам может потребоваться указать происхождение преобразования:

transform-origin: posx posy;

В этом случае я бы рекомендовал использовать transform-origin: 0 0; так как вы плаваете по своему изображению влево.

http://jsfiddle.net/teddyrised/t3rUb/ (добавлены префиксы поставщиков)

[Изменить]: Что касается беспокойства по размытому изображению, если вы используете более высокое разрешение, чем изображение будет расширяться, вам не придется беспокоиться о сокращенном разрешении.

@minitech Нет, если изображение уменьшено для начала.
@minitech Проверьте обновленную скрипку. Я использую Chrome, и он не масштабирует уменьшенное изображение. Он правильно масштабирует исходное изображение.
@Kolink: видимо «последний раз, когда я проверял» было некоторое время назад: P