Как "обрезать" прямоугольное изображение в квадрат с помощью CSS?

Я знаю, что на самом деле невозможно изменить изображение с помощью CSS, поэтому я помещаю обрезку в кавычки.

Что я хотел бы сделать, это взять прямоугольные изображения и использовать CSS, чтобы они выглядели квадратными, не искажая изображение вообще.

Я бы в основном хотел повернуть это:

в:

8 112
html css image-processing crop

8 ответов:

предполагая, что они не должны быть в тегах IMG...

HTML:

<div class="thumb1">
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

EDIT: если div нужно связать где-то просто настроить HTML и стили так:

HTML:

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

обратите внимание, это может также быть изменен, чтобы быть гибкой, например % ширины и высоты и т. д.

62

чистое решение CSS без обертки div или другой бесполезный код:

img {
  object-fit: cover;
  width:230px;
  height:230px;
}
245
  1. поместите изображение в div.
  2. дайте ваш div явные квадратные размеры.
  3. установите свойство переполнения CSS на div в hidden (overflow:hidden).
  4. поместите свое представление в div.
  5. прибыль.

например:

<div style="width:200px;height:200px;overflow:hidden">
    <img src="foo.png" />
</div>
49

использование фона-размер: обложка -http://codepen.io/anon/pen/RNyKzB

CSS:

.image-container {
  background-image: url('http://i.stack.imgur.com/GA6bB.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:250px;
  height:250px;
}

разметка:

<div class="image-container"></div>
29

Я на самом деле столкнулся с этой же проблемой недавно и в конечном итоге с немного другим подходом (я не смог использовать фоновые изображения). Это требует немного jQuery, хотя для определения ориентации изображений (я уверен, что вы могли бы использовать обычный JS вместо этого).

Я написал сообщение в блоге об этом если вас интересует больше объяснений, но код довольно просто:

HTML:

<ul class="cropped-images">
  <li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
  <li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>

CSS:

li {
  width: 150px; // Or whatever you want.
  height: 150px; // Or whatever you want.
  overflow: hidden;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}
li img {
  max-width: 100%;
  height: auto;
  width: auto;
}
li img.landscape {
  max-width: none;
  max-height: 100%;
}

jQuery:

$( document ).ready(function() {

    $('.cropped-images img').each(function() {
      if ($(this).width() > $(this).height()) {
        $(this).addClass('landscape');        
      }
    });

});
12

использовать CSS: overflow:

.thumb {
   width:230px;
   height:230px;
   overflow:hidden
}
1

У меня была аналогичная проблема, и я не мог "компромисс" с фоновыми изображениями. Это я придумал.

<div class="container">
    <img src="http://lorempixel.com/800x600/nature">
</div>

.container {
    position: relative;
    width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
    border: 2px solid #fff; /* just to separate the images */
    overflow: hidden; /* "crop" the image */
    background: #000; /* incase the image is wider than tall/taller than wide */
}

.container img {
    position: absolute;
    display: block;
    height: 100%; /* all images at least fill the height */
    top: 50%; /* top, left, transform trick to vertically and horizontally center image */
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});

надеюсь, что это помогает!

пример: https://jsfiddle.net/cfbuwxmr/1/

1

либо использовать div с квадратными размерами с изображением внутри с помощью .класс testimg:

.test {
width: 307px;
height: 307px;
overflow:hidden
}

.testimg {
    margin-left: -76px

}

или квадрат div с фоном изображения.

.test2 {
width: 307px;
height: 307px;
    background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

вот несколько примеров:http://jsfiddle.net/QqCLC/1/

ОБНОВЛЕНО ТАКИМ ОБРАЗОМ, ИЗОБРАЖЕНИЯ ЦЕНТРОВ

.test {
  width: 307px;
  height: 307px;
  overflow: hidden
}

.testimg {
  margin-left: -76px
}

.test2 {
  width: 307px;
  height: 307px;
  background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}
<div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>

<div class="test2"></div>
1