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

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

Я пытаюсь сделать через 
[[+image:phpthumbof=`w=1500&h=600&zc=C&iar=1`]]
и всё работает если взять большую картинку, а если взять маленькую то картинка просто увеличивается по одной из сторон

Михаил
Михаил
28 декабря 2016, 14:11
modx.pro
3 243
Техническая поддержка MODX Сайт лежит, тормозит или остался без разработчика? Переезд с MODX 2 на 3, PHP 7 на 8, скорость и безопасность. Поддержка со сроками и ответственностью, а не совет в чате. Подробнее Реклама

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

man
man
29 декабря 2016, 12:00
Попробуй
&zc=1
    Дмитрий Суворов
    Дмитрий Суворов
    29 декабря 2016, 12:33
    зачем? Ему не нужно, чтобы картинка обрезалась.

    Как вариант, можно указать только одну сторону, вторая пропорционально увеличится
      man
      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, а тут оказывается просто нельзя так.
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        6