CSS Отображение изображения, измененного и обрезанного

Ответ 1

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

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

Ответ 2

С помощью 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>

Ответ 3

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

.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">

Ответ 4

.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

<div class="imgContainer">
  <img src="imageSrc" />
</div>

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

Ответ 5

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

Ответ 6

Спасибо sanchothefat.

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

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

Ответ 7

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

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

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

Ответ 8

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 

Ответ 9

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

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

Ответ 10

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

Ответ 11

Живой пример: 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);
      }

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

Подробнее о свойствах клипа выполните следующие действия: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

Ответ 12

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

Ответ 13

То, что я сделал, - создать серверную часть script, которая изменит размер и обрезает изображение на сервере, чтобы он отправил меньше данных через интерфейс.

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

Ответ 14

Есть услуги, такие как 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]

Ответ 15

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

Ответ 16

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

Ответ 17

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

Итак...

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

  высота = 191

• Установите нижнее поле на -19 пикселей (сокращение изображения до 172 пикселей):

  краю дна: -19px

• Установите верхнее положение на -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, это не проблема для меня.

Ответ 18

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

• Загрузите изображение куда хотите (S3, imgur и т.д.)
• Подключите его к выделенному URL-адресу API (с нашей панели инструментов)