Графика CSS и квадрат

Итак, у меня есть коллекция миниатюр в моем приложении размером 200x200. Иногда исходное изображение не имеет этого отношения, поэтому я планирую обрезать это изображение на квадрат.

В настоящее время он просто растягивает изображение, чтобы вставить его в миниатюру, поэтому скажем, что мой первоначальный размер изображения составляет 400x800, тогда изображение выглядит очень хлюпавшим. Я хотел обрезать это изображение, чтобы он смотрел на кратчайшую ширину/высоту, а затем обрезал его до квадрата, поэтому в моем примере выше он будет обрезан до 400x400.

Есть ли способ легко сделать это с помощью CSS или мне нужно использовать какой-то JS для этого?

Ответы

Ответ 1

Вы можете сделать это легко в CSS, если используете фоновое изображение.

.thumb {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 5px;
    border: 3px solid #c99;
    background-position: center center;
    background-size: cover;
}

В этой скрипке первое изображение 400х800, второе изображение - 800x400:

http://jsfiddle.net/samliew/tx7sf

Ответ 2

Обновлено для обработки случаев, когда ширина изображения больше высоты.

Вы можете сделать это с помощью чистого CSS. Установите элемент контейнера каждого изображения на фиксированную высоту и ширину и overflow: hidden. Затем установите для изображения значение min-width: 100%, min-height: 100%. Любая дополнительная высота или ширина переполняют контейнер и будут скрыты.

HTML

<div class="thumb">
    <img src="http://lorempixel.com/400/800" alt="" />
</div>

CSS

.thumb {
    display: block;
    overflow: hidden;
    height: 200px;
    width: 200px;
}

.thumb img {
    display: block; /* Otherwise it keeps some space around baseline */
    min-width: 100%;    /* Scale up to fill container width */
    min-height: 100%;   /* Scale up to fill container height */
    -ms-interpolation-mode: bicubic; /* Scaled images look a bit better in IE now */
}

Посмотрите http://jsfiddle.net/thefrontender/XZP9U/5/

Ответ 3

Я придумал свое решение и подумал, что поделюсь с ним здесь, если кто-нибудь еще найдет эту тему. Решение background-size: cover является самым простым, но мне нужно что-то, что будет работать и в IE7. Вот что я придумал с помощью jQuery и CSS.

Примечание. Мои изображения были "профильными" изображениями и должны быть обрезаны на квадраты. Следовательно, некоторые имена функций.

JQuery

cropProfileImage = function(pic){
    var h = $(pic).height(),
        w = $(pic).width();

    if($(pic).parent('.profile-image-wrap').length === 0){
                     // wrap the image in a "cropping" div
         $(pic).wrap('<div class="profile-image-wrap"></div>');
    }

      if(h > w ){
          // pic is portrait
          $(pic).addClass('portrait');
          var m = -(((h/w) * 100)-100)/2; //math the negative margin
          $(pic).css('margin-top', m + '%');    
      }else if(w > h){ 
          // pic is landscape
          $(pic).addClass('landscape'); 
          var m = -(((w/h) * 100)-100)/2;  //math the negative margin
          $(pic).css('margin-left', m + '%');
      }else {
        // pic is square
        $(pic).addClass('square');
      }
 }

// Call the function for the images you want to crop
cropProfileImage('img.profile-image');

CSS

.profile-image { visibility: hidden; } /* prevent a flash of giant image before the image is wrapped by jQuery */

.profile-image-wrap { 
      /* whatever the dimensions you want the "cropped" image to be */
      height: 8em;
      width: 8em;
      overflow: hidden; 
 }

.profile-image-wrap img.square {
      visibility: visible;
      width: 100%;  
 }

 .profile-image-wrap img.portrait {
      visibility: visible;
      width: 100%;
      height: auto;
 }

 .profile-image-wrap img.landscape {
      visibility: visible;
      height: 100%;
      width: auto;
 }