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

Дополнение: phpthumbof

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

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

28 декабря 2016, 17:11    Михаил   G+  
0    392 0

Комментарии (6)

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

      Как вариант, можно указать только одну сторону, вторая пропорционально увеличится
      1. man 29 декабря 2016, 14:04 # 0
        Как бэ, автор писал "при этом обрезав лишнее"
        А вообще Вы конечно правы… можно указать одну сторону, тогда все должно быть пропорцианально.
    2. Алексей Федоров 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`]]);"
      
      Или что-то типа того)
      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 похер — то на эти выверты можно забить.
      2. Михаил 29 декабря 2016, 14:23 # 0
        Спасибо друзья! Как это с помощью CSS сделать я знаю :) Думал может я что то не понимаю с phpthumbof, а тут оказывается просто нельзя так.
        Вы должны авторизоваться, чтобы оставлять комментарии.