CSS Показать изображение с измененным размером и обрезкой


334

Я хочу показать изображение из URL с определенной шириной и высотой, даже если оно имеет другое соотношение размеров. Поэтому я хочу изменить размер (сохранить соотношение), а затем обрезать изображение до нужного размера.

Я могу изменить размер с помощью imgсвойства HTML, и я могу сократить с background-image.
Как я могу сделать оба?

Пример:

Это изображение:

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


Имеет размер в 800x600пикселях, и я хочу показать как изображение 200x100пикселей


С помощью imgя могу изменить размер изображения 200x150px:

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">


Это дает мне это:

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">


И с помощью background-imageя могу вырезать изображения 200x100пикселей.

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

Дает мне:

    <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>


Как я могу сделать оба?
Изменить размер изображения, а затем сократить его размер, который я хочу?

Ответы:


475

Вы можете использовать комбинацию обоих методов, например.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }
    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

Вы можете использовать негатив marginдля перемещения изображения внутри <div/>.


9
Обратите внимание, что если вы установите положение: относительное на содержащемся изображении, вам нужно установить положение: относительное на содержащем div. Если вы этого не сделаете, я обнаружил, что IE на самом деле не будет обрезать изображение.
Фрэнк Швитерман

также удалите высоту из класса .crop img
Вакар Аламгир

@ waqar-alamgir Это не сработает, если вы удалите декларацию высоты
roborourke

6
Также обратите внимание, что при использовании CSS для обрезки изображения пользователь все равно должен загрузить изображение. Может быть лучше использовать php и GD или другую библиотеку для редактирования изображений, чтобы изменить их размер и обрезать изображение перед отправкой пользователю. Все зависит от того, что вы хотите, загрузки сервера или пропускной способности пользователей.
J-Rou

15
Просто примечание для других: высота и ширина обрезки определяют, где будет разрезаться самая нижняя и самая правая часть изображения. .crop img высота и ширина будет масштабировать изображение. .crop img margin будет панорамировать изображение
Фредерик,

138

С CSS3 можно изменить размер background-imageс background-size, выполняя обе цели одновременно.

Есть несколько примеров на css3.info .

Реализовано на основе вашего примера с использованием donald_duck_4.jpg . В этом случае background-size: cover;как раз то, что вам нужно - оно подходит для того, background-imageчтобы покрыть всю область содержимого <div>и обрезает лишнее (в зависимости от соотношения).

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}
<div class="with-bg-size">Donald Duck!</div>


1
Отличное решение, но одно предостережение в том, что он не совместим с IE <9 (если это больше важно для кого-либо). Кроме того, я хотел бы отметить, что если вы замените обложку контентом на background-size, он будет масштабироваться, но не обрезать изображение.
Девятого

4
Для <img />тегов посмотрите object-fit: coverи связанные значения из спецификации CSS Image Values ​​и Replaced Content Module Level 3 .
Джоэл Пурра

111

Вы пытались использовать это?

.centered-and-cropped { object-fit: cover }

Мне нужно было изменить размер изображения по центру (как по вертикали, так и по горизонтали), а затем обрезать его.

Я был счастлив обнаружить, что это можно сделать за одну линию CSS. Проверьте пример здесь: http://codepen.io/chrisnager/pen/azWWgr/?editors=110


Вот CSSи HTMLкод из этого примера:

.centered-and-cropped { object-fit: cover }
<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">


2
Спасибо, я думаю, что это самый простой и универсальный способ - но он не работает с IE: / Найти документы здесь: developer.mozilla.org/de/docs/Web/CSS/object-fit
mozzbozz

2
Подгонка объектов CSS3 не поддерживается IE11 или EDGE (14) caniuse.com/#feat=object-fit
eye-wonder

1
@ eye-wonder он поддерживается в Edge 16 и скоро выйдет. Если он не критичен и используется экономно, его можно использовать сегодня
Рэй Фосс

В CSS3 мы можем попробовать либо img + object-fit, либо div + background-image. До сих пор, по моему опыту, фоновое изображение может быть использовано для большего количества условий.
Эрик

1
На данный момент это также поддерживается Edge (с тех пор, пока не знаю).
Джеральд Шнайдер

20
.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}
<div class="imgContainer">
  <img src="imageSrc" />
</div>

Содержащий div по существу обрезает изображение, скрывая переполнение.



8

Спасибо sanchothefat.

У меня есть улучшение вашего ответа. Поскольку кадрирование очень адаптировано для каждого изображения, эти определения должны быть в HTML, а не в CSS.

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>


6

object-fitможет помочь вам, если вы играете с <img>тегом

Приведенный ниже код обрезает ваше изображение для вас. Вы можете поиграть с подгонкой объекта

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

Это сделало мой день - я мог легко прикрепить это к слайду в моей реализации карусели скользящего слайдера - простое решение объекта IMG и не касаясь «базы кода плагина слайдера»
andreas-supersmart

в этом преимущество CSS :)
Хидайт Рахман

5

Пример из жизни: https://jsfiddle.net/de4Lt57z/

HTML:

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

CSS:

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

Объяснение: Здесь размер изображения изменяется по ширине и высоте изображения. И обрезка осуществляется с помощью свойства клипа.

Для получения подробной информации о свойствах клипа следуйте: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/


4

В классе обрезки поместите размер изображения, которое вы хотите отобразить:

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

HTML будет выглядеть так:

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

3
<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p> 

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

1

Вы можете поместить тег img в тег div и сделать оба, но я бы рекомендовал не масштабировать изображения в браузере. Это делает паршивую работу большую часть времени, потому что браузеры имеют очень упрощенные алгоритмы масштабирования. Лучше сначала выполнить масштабирование в Photoshop или ImageMagick, а затем довести его до клиента красиво и красиво.


1

Я создал сценарий на стороне сервера, который будет изменять размер и обрезать картинку на стороне сервера, чтобы он передавал меньше данных через Интернет.

Это довольно тривиально, но если кому-то интересно, я могу выкопать и выложить код (asp.net)


CGI, вероятно, является наиболее переносимым методом (и эффективным по полосе пропускания), если OP не намерен позволять пользователю самостоятельно выполнять изменение размера и обрезку с помощью Javascript.
Стражер

1

Есть такие сервисы, как Filestack, которые сделают это за вас.

Они принимают URL-адрес вашего изображения и позволяют изменить его размер с помощью параметров URL-адреса. Это довольно легко.

Ваше изображение будет выглядеть так после изменения размера до 200x100, но с сохранением соотношения сторон

Весь URL выглядит так

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

но важная часть просто

resize=width:200/crop=d:[0,25,200,100]

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


хороший штекер может быть - но в равной степени - отличный сервис (нет, мне не платят, чтобы сказать это ;-)) - я буквально только что зарегистрировался, и это довольно круто
Джонатан Лион

1

Попробуйте использовать clip-pathсвойство:

Свойство clip-path позволяет обрезать элемент к базовой фигуре или к источнику SVG.

Примечание. Свойство clip-path заменит устаревшее свойство clip.

img {
  width: 150px;
  clip-path: inset(30px 35px);
}
<img src="http://i.stack.imgur.com/wPh0S.jpg">

Больше примеров здесь .


0
<div class="crop">
    <img src="image.jpg"/>
</div>
.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

0

Если вы используете Bootstrap, попробуйте использовать { background-size: cover; }для <div>дать классу слово скажем, <div class="example" style=url('../your_image.jpeg');>чтобы он стал div.example{ background-size: cover}


0

Мне нужно было сделать это недавно. Я хотел сделать пиктограмму-ссылку на график NOAA. Поскольку их график может измениться в любое время, я хотел, чтобы мой эскиз менялся вместе с ним. Но есть проблема с их графиком: он имеет огромную белую рамку сверху, поэтому, если вы просто масштабируете его, чтобы сделать миниатюру, вы получите лишние пробелы в документе.

Вот как я это решил:

http://sealevel.info/example_css_scale_and_crop.html

Сначала мне нужно было сделать немного арифметики. Исходное изображение от NOAA составляет 960 × 720 пикселей, но верхние семьдесят пикселей - это лишняя белая граница. Мне нужно было миниатюру 348 × 172, без дополнительной границы в верхней части. Это означает, что желаемая часть исходного изображения имеет высоту 720 - 70 = 650 пикселей. Мне нужно было уменьшить его до 172 пикселей, то есть 172/650 = 26,5%. Это означало, что 26,5% из 70 = 19 строк пикселей необходимо удалить из верхней части масштабированного изображения.

Так…

  1. Установите высоту = 172 + 19 = 191 пикселей:

    высота = 191

  2. Установите нижнее поле до -19 пикселей (укорочение изображения до 172 пикселей в высоту):

    край дно: -19px

  3. Установите верхнюю позицию на -19 пикселей (смещая изображение вверх, чтобы верхние строки в 19 пикселей переполнялись и скрывались вместо нижних):

    верх: -19px

Результирующий HTML выглядит так:

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

Как видите, я выбрал стилизацию содержащего тега <a>, но вместо этого вы можете использовать стиль <div>.

Одним из недостатков этого подхода является то, что если вы покажете границы, верхняя граница будет отсутствовать. Так как я в любом случае использую border = 0, для меня это не было проблемой.


0

Вы можете воспользоваться сервисом изменения размера изображения Kodem . Вы можете изменить размер любого изображения с помощью http-звонка. Может использоваться случайно в браузере или использоваться в вашем производственном приложении.

  • Загрузите изображение куда хотите (S3, imgur и т. Д.)
  • Подключите его к выделенному URL-адресу API (с нашей панели инструментов)
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.