Как увеличить картинку и обрезать?

Подскажите пожалуйста как увеличить картинку пропорционально при этом обрезав лишнее?
Не спрашивайте зачем мне это нужно :)

Я пытаюсь сделать через

[[+image:phpthumbof=`w=1500&h=600&zc=C&iar=1`]]

и всё работает если взять большую картинку, а если взять маленькую то картинка просто увеличивается по одной из сторон

Михаил

28 декабря 2016, 14:11

3 209

Комментарии: 6

man

29 декабря 2016, 12:00

Попробуй

&zc=1

Дмитрий Суворов

29 декабря 2016, 12:33

зачем? Ему не нужно, чтобы картинка обрезалась.

Как вариант, можно указать только одну сторону, вторая пропорционально увеличится

man

29 декабря 2016, 14:04

Как бэ, автор писал "при этом обрезав лишнее"
А вообще Вы конечно правы… можно указать одну сторону, тогда все должно быть пропорцианально.

Алексей Федоров

29 декабря 2016, 12:56

Довольно «нестандартная» задача… ладно, не спрашиваю зачем)) Я вижу только фронт-вариант для решения, то есть обрезание картинки по факту не делать, а поместить ее фоном в контейнер с фиксированными размерами и центрированием.

.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`]]);"

Или что-то типа того)

Илья Катасонов

29 декабря 2016, 14:02

Проще (и лучше) использовать object-fit: cover; — сохраняется семантика и структура кода.

Простой пример:

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 похер — то на эти выверты можно забить.

Михаил

29 декабря 2016, 14:23

Спасибо друзья! Как это с помощью CSS сделать я знаю :) Думал может я что то не понимаю с phpthumbof, а тут оказывается просто нельзя так.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.