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

Question

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

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

Пример:

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

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

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

<img 
    style="width: 200px; height: 150px;" 
    src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">

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

<img style="width: 200px; height: 150px;" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">

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

<div 
    style="background-image:
           url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

Дает мне:

<div style="background-image:url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

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

Answer 1

<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;
}

Answer 2

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

Answer 3

Есть сервисы , например 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]

Answer 4

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

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

Answer 5

Мне нужно было сделать это недавно. Я хотел сделать пиктограмму-ссылку на график 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>

Как видите, я выбрал стиль содержащего тега , но вместо этого вы можете использовать стиль

.

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

Answer 6

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

Answer 7

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