Як "обрізати" прямокутне зображення на квадрат за допомогою CSS?


170

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

Що я хотів би зробити, це сфотографувати прямокутні зображення та використовувати CSS, щоб вони виглядали квадратними, не спотворюючи зображення взагалі.

Я в основному хотів би це зробити:

введіть тут опис зображення

У це:

введіть тут опис зображення


4
Чи є ці зображення фоновими зображеннями divs чи важливо для SEO, щоб вони залишалися в тегах <img>?
Майкл

2
Ви ще щось пробували? Це досить просто, будь то CSS3 background-positionабо старий оболонка з роздільником overflow:hiddenта зображенням з відносним розташуванням.
Fabrício Matté

Вони точно можуть бути фоновими зображеннями
novicePrgrmr

Дивіться мою відповідь, я думаю, що це ваш найкращий найкращий варіант. Це уникає позиціонування елементів.
Майкл

Відповіді:


78

Якщо припустити, що вони не повинні бути в тегах 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 }

Зверніть увагу, це також може бути змінено так, щоб воно відповідало, наприклад,% ширини та висоти тощо.


1
це хороший спосіб розташування ТА обрізання за допомогою одного тегу.
роман

8
Зауважте також, що під час друку веб-переглядачі вимикають фонові зображення, щоб вони не відображалися.
j08691

Він може впоратися: наведення курсора також. Якщо div потрібно десь зв’язати, просто додайте тег. Що стосується друку, що можна виправити за допомогою print.css? Виправте мене, якщо я помиляюся?
Майкл

Насправді, чесно кажучи, у цьому випадку з тегом A друк матиме відступ, і в будь-якому випадку, ви хочете додати CSS-стилі, щоб це все виправити для друку.
Майкл

1
Не маю на height: 460px; width: 100%;
увазі

417

Чисте рішення CSS без обгортки divчи іншого марного коду:

img {
  object-fit: cover;
  width:230px;
  height:230px;
}

12
Зауважте, що це, на жаль, не працює на IE та Edge atm. Дивіться тут для більш докладної інформації про те: stackoverflow.com/a/37792830/1398056
baoutch

2
що ми не знаємо висоти, яку ми хочемо зробити так, щоб вона була квадратна з автоматичною шириною
Aravind Reddy

3
Станом на червень 2018 року, здається, що лише IE11 (2,71%) не підтримує об'єктну форму, для мене досить добре.
Рей

1
У 2019 році підтримка зараз досить хороша. Лише 2,3% все ще використовують IE 11. Це рішення настільки просто, що я не можу не використати його, тому що інші такі болі, що я витрачав години, намагаючись змусити його працювати з резервним кодом.
Пол Морріс

3
Пора всім забути про IE
iji

55
  1. Розмістіть своє зображення у діві.
  2. Надайте своєму діві чіткі квадратні розміри.
  3. Встановіть властивість переповнення CSS у div на прихований ( overflow:hidden).
  4. Поставте свою уяву всередині діва.
  5. Прибуток.

Наприклад:

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

5
Потрібно переконатися в центрі або принаймні пограти з розташуванням зображення всередині. Зразок ОП виглядає в центрі (хоча я просто згадую це і не сподіваюся, що ти взагалі зміниш свою відповідь: P).
роман

1
@rlemon - тоді ОП може встановити положення діва на відносне, а положення зображення - на абсолютне, а також налаштувати верхній і лівий атрибути.
j08691

6
Я просто згадую це перед тим, як хтось усе; "Але це все залишилося вирівняно!" -: Р
рельман

1
Так, було б вирішальним, щоб воно було по центру
novicePrgrmr

32

Використання розміру фону: обкладинка - 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>

1
Поєднуючи здатність центрування відповіді компанії mtronics, вона працює добре навіть на IE9.
Факер

14

Я фактично зіткнувся з цією ж проблемою нещодавно і закінчився дещо іншим підходом (я не зміг використати фонові зображення). Це вимагає невеликого шматочка 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');        
      }
    });

});

Я думаю, що це перевершує фонову альтернативу CSS, оскільки зображення є вмістом, а не "стилем", тому їх слід зберігати на шарі HTML. Також наявність їх у CSS замість HTML вплине на SEO вашої веб-сторінки. Дякую!
Хосе Флорідо

Хорошою ідеєю для покращення цього є додавання $(this).load(function(){...всередині кожного циклу, тому jQuery трохи зачекає, поки зображення завантажується і не отримає реальних розмірів зображення.
Хосе Флорідо

14

Якщо зображення знаходиться в контейнері з чутливою шириною:

HTML

<div class="img-container">
  <img src="" alt="">
</div>

CSS

.img-container {
  position: relative;

  &::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

Це справді приємно. Це також неймовірно гнучко, оскільки, як тільки зображення буде квадратне, ви можете зробити його обведеним і робити інші цікаві речі.
Rocky Kev

3

У мене була подібна проблема і не могла "йти на компроміс" з фоновими зображеннями. Я придумав це.

<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/


2

Використовуйте CSS: overflow:

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

3
Ці розміри не дуже квадратні. :-)
isherwood

2
Ні, ти маєш рацію. Дух. Я щойно піднімав існуючу висоту від розміру зображення OP, мов якийсь робочий день, що згорів у п'ятницю.
Діод - Джеймс Макфарлан

Хе. Я з вами там. :-)
isherwood

1

Або використовуйте div з квадратними розмірами із зображенням усередині класу .testimg:

.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%
}

Ось кілька прикладів: 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>


0

object-fit: cover зробить саме те, що вам потрібно.

Але це може не працювати на IE / Edge. Виконайте, як показано нижче, щоб виправити це лише за допомогою CSS для роботи у всіх браузерах .

Я прийняв підхід, щоб розташувати зображення всередині контейнера з абсолютним, а потім розмістити його прямо в центрі, використовуючи комбінацію:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Як тільки він знаходиться в центрі, я дарую зображення,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Це змушує зображення отримати ефект Object-fit: cover.


Ось демонстрація вищезазначеної логіки.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Ця логіка працює у всіх браузерах.


Оригінальне зображення
Оригінальне зображення

Вертикально обрізаний
Вертикально обрізане зображення

Горизонтально обрізаний
Горизонтально обрізане зображення


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.