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

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

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

Михаил
28 декабря 2016, 14:11
modx.pro
2 584
0

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

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

    Как вариант, можно указать только одну сторону, вторая пропорционально увеличится
      man
      man
      29 декабря 2016, 14:04
      0
      Как бэ, автор писал "при этом обрезав лишнее"
      А вообще Вы конечно правы… можно указать одну сторону, тогда все должно быть пропорцианально.
    Алексей Федоров
    29 декабря 2016, 12:56
    0
    Довольно «нестандартная» задача… ладно, не спрашиваю зачем)) Я вижу только фронт-вариант для решения, то есть обрезание картинки по факту не делать, а поместить ее фоном в контейнер с фиксированными размерами и центрированием.
    .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
      0
      Проще (и лучше) использовать 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
      0
      Спасибо друзья! Как это с помощью CSS сделать я знаю :) Думал может я что то не понимаю с phpthumbof, а тут оказывается просто нельзя так.
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        6