Как сделать натягивание изображение с масштабированием?

Question

[Abc Edc]

<div class="gal-img-wrap-wrap">
                    <div class="gal-img-wrap">
                        <img  src="/<?php echo  $elem->subid.'/'.$elem->photo?>">
                    </div>
                </div>

.gal-img-wrap-wrap{
         overflow: hidden;
         background-size: cover;
         height: 300px;
         width: 300px;
     }
.gal-img-wrap{
        width: 150%;
        height: 150%;
    }
       .gal-img-wrap-wrap .gal-img-wrap img{
           width: 100%;
            height: 100%;
        }

Как то так но, с масштабированием без потерь . То есть обязательный размер 300на300 , пускай изображение натягивается и как лупой масштабируется при этом все равно сохраняя пропорции. Будь то меньше оно или больше. Даже если 1 на300 изображение все равно натягивалось , хоть до квадратиков

Answer 1

[Евгений Петров]

HTML

<span class="pic"><img src="/i/h.png"></span>
<span class="pic"><img src="/i/v.png"></span>

CSS

.pic {
	display: inline-block;
	overflow: hidden;
	width: 300px;
	height: 300px;
}
.pic img {
	min-width: 100%;
	min-height: 100%;
	/*Если требуется центрировать фотографии*/
	margin: 50% -50% -50% 50%;
	transform: translate(-50%, -50%);
}

Если планируется использовать IE 8 и ниже — убирайте последние 2 строчки в CSS с центрированием.

Comments

[Abc Edc]

большое спасибо вам

[Abc Edc]

Правда на самых юродивых фотографиях все же заметно конечно искажение а не масштабирование

[Евгений Петров]

ГЛЕБ ГЛЕБОВ: Несоответствие размеров изображения реальным пиксельным размерам заставляет браузер подгонять его. Происходит это далеко не лучшим образом (я подозреваю, что там вообще линейная интерполяция). Искажения неизбежны, увы, браузер — не графический редактор.

[Abc Edc]

Евгений Петров: а как создать эффект масштабирования в блок полный?

[Евгений Петров]

Я не совсем понимаю:) Что вы имеете ввиду под масштабированием? Эффект увеличения при наведении? Или что-то другое?

[Abc Edc]

может как то clip добавить

[Abc Edc]

Евгений Петров: Да нее, эффект не так выразился, ну то есть когда фотошопом пользуемся мы масштаб делаем лупой, вот, она приближает при этом чтобы при масштабе по холсту двигаться (потом что в экран не влезает мы мышкой двигаемся), так же и тут насильно сделать может как то изображение масштабируя натягивать на нужный размер

[Евгений Петров]

Я повторю — вы хотите добить какого-то эффекта при наведении? Или у всех изображений одновременно? Из ваших объяснений я ничего не понял. Или приведите примеры такого поведения. Видели где-то их?