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

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

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

Михаил
28 декабря 2016, 14:11
709
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, а тут оказывается просто нельзя так.