Как увеличить картинку и обрезать?
Подскажите пожалуйста как увеличить картинку пропорционально при этом обрезав лишнее?
Не спрашивайте зачем мне это нужно :)
Я пытаюсь сделать через
Не спрашивайте зачем мне это нужно :)
Я пытаюсь сделать через
[[+image:phpthumbof=`w=1500&h=600&zc=C&iar=1`]]
и всё работает если взять большую картинку, а если взять маленькую то картинка просто увеличивается по одной из сторон Комментарии: 6
Попробуй
&zc=1
зачем? Ему не нужно, чтобы картинка обрезалась.
Как вариант, можно указать только одну сторону, вторая пропорционально увеличится
Как вариант, можно указать только одну сторону, вторая пропорционально увеличится
Как бэ, автор писал "при этом обрезав лишнее"
А вообще Вы конечно правы… можно указать одну сторону, тогда все должно быть пропорцианально.
А вообще Вы конечно правы… можно указать одну сторону, тогда все должно быть пропорцианально.
Довольно «нестандартная» задача… ладно, не спрашиваю зачем)) Я вижу только фронт-вариант для решения, то есть обрезание картинки по факту не делать, а поместить ее фоном в контейнер с фиксированными размерами и центрированием.
.i-thumb {
background: no-repeat;
-moz-background-size: 100%;
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
width: 1500px;
height: 600px;
}
<div class="i-thumb" style="background-image: url([[+image:phpthumbof=`w=1500&h=600&zc=C&iar=1`]]);"
Или что-то типа того)
Проще (и лучше) использовать object-fit: cover; — сохраняется семантика и структура кода.
Простой пример:
CSS:
HTML:
Отсутствует поддержка в iE и Edge — там нужно лепить хак, через background-size, по типу примера выше.
Что-то в духе (с помощью modernizr):
JS:
CSS:
HTML:
А если на IE и Edge похер — то на эти выверты можно забить.
Простой пример:
CSS:
.article-photo {
height: 100px;
width: 100px;
}
.photo-image {
object-fit: cover;
height: 100%;
width: 100%;
}
HTML:
<div class="article-photo">
<img class="photo-image" src="some-src/image-name.png">
</div>
Отсутствует поддержка в iE и Edge — там нужно лепить хак, через background-size, по типу примера выше.
Что-то в духе (с помощью modernizr):
JS:
if (!Modernizr.objectfit) {
$('.with-object-fit').each(function () {
var $container = $(this),
imgUrl = $container.find('img').prop('src');
if (imgUrl) {
$container
.css('backgroundImage', 'url(' + imgUrl + ')')
.addClass('is-trick');
}
});
}
CSS:
.with-object-fit img {
object-fit: cover;
height: 100%;
width: 100%;
}
.with-object-fit.is-trick {
background-size: cover;
background-position: center center;
}
.with-object-fit.is-trick img {
opacity: 0;
}
HTML:
<div class="article-photo with-object-fit">
<img src="some-path/image-name.png" class="photo-image">
</div>
А если на IE и Edge похер — то на эти выверты можно забить.
Спасибо друзья! Как это с помощью CSS сделать я знаю :) Думал может я что то не понимаю с phpthumbof, а тут оказывается просто нельзя так.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.