Масштабируйте изображение до тех пор, пока X или Y не совпадут с контейнером, а затем обрежьте остальные - PullRequest
Новая
       23

Масштабируйте изображение до тех пор, пока X или Y не совпадут с контейнером, а затем обрежьте остальные

5 голосов
/ 21 марта 2011

Я загружаю изображения в нескольких местах, где тема сайта будет отображать их в разных размерах. Я экспериментировал со свойствами CSS и обнаружил, что могу масштабировать изображение, используя параметры высоты и ширины, и обрезать изображение, используя позиции: относительный и переполнение: скрытый.

Что я хочу сделать, так это сочетание этого. Уменьшать изображение до тех пор, пока ширина не станет шириной элемента контейнера, или высота не станет высотой элемента контейнера (который когда-либо будет первым). Тогда обрежьте остальное.

Таким образом, изображение должно быть пропорциональным, а также заполнять контейнер независимо от формы.

Есть идеи?

Marvelous

Ответы [ 3 ]

1 голос
/ 17 мая 2012

Чтобы перефразировать ваш вопрос более кратко;Вы хотите увеличить изображение до fill это элемент контейнера.На данный момент это невозможно сделать только с помощью CSS3, но Кристиан Варга прекрасно это сделал с помощью jQuery:

https://christianvarga.com/jquery-resize-image-to-parent-container-plugin/

1 голос
/ 21 марта 2011

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

Приведенный ниже код изменит размер изображения в соответствии с размером контейнера. 

<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%; height:100%;"/>
</div>

ключ понимает, что свойства высоты и ширины img могут использовать%. Использование% в вашем дизайне отлично подходит для придания гибкости. Это, конечно, заставит изображение любого размера родительского контейнера. Поэтому, если у родительского контейнера неправильное соотношение сторон, изображение будет искажено.

Чтобы сохранить соотношение сторон, вам нужно знать размер, чтобы заранее расширяться, и указывать его только в стиле тега img. Например, ниже будет правильно изменить размер изображения только по ширине. 

<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%;"/>
</div>

Используя вышеизложенное, если YOUR_PIC.jpg имеет размер 200x200 пикселей, он уменьшит его до 100px и обрежет до 100px снизу.

Если вы хотите, чтобы он расширялся в пределах диапазонов вместе с шириной / высотой, вы бы использовали свойства 'max-width' / 'min-width' и 'max-height' / 'min-height' css на img. Установите те, что вам нужно. Тогда у вас будет что-то вроде этого: 

<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%; height:100%; max-width:50px; max-height:50px;"/>
</div>

Приведенный выше код гарантирует, что изображение не будет увеличено для контейнеров размером более 50 пикселей, но будет уменьшено для любого контейнера размером менее 50 пикселей.

Кроме того, вы можете использовать некоторый JavaScript для динамического вычисления размеров. Это было бы полезно, если вы заранее не знаете, какое измерение вы хотите изменить. Используйте javascript для расчета размера, а затем установите соответствующие свойства CSS выше. Я бы предложил использовать jquery, чтобы упростить вашу жизнь на JavaScript.

Надеюсь, это приведет вас на правильный путь.

0 голосов
/ 03 мая 2012

Вы можете использовать JavaScript и CSS.Javascript для проверки высоты / ширины изображения, затем примените соответствующий CSS.

Javascript (примечание: использование zeptojs, очень похожее на jQuery): 

$(window).bind("load", function() {
    $.each($("img"), function(index, item) {
        var image = new Image();
        image.src = item.src;
        if (image.height > image.width) {
            $(item).addClass("resize-x");
        } else {
            $(item).addClass("resize-y");
        }
    });
})

CSS: 

.resize-x {width: 64px; height : auto;}
.resize-y {width: auto; height : 64px;}
...