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

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

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

CSS:

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

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

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

Answer 2

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

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

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

.with-bg-size {
  background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.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>

css3 background-image background-size

Answer 3

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

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

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

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

---

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

CSS:

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

HTML:

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

Спасибо sanchothefat.

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

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

Answer 7

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

Answer 8

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

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

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

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

Answer 10

Live Пример: 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/