Выбор только средней части изображения с помощью CSS

У меня есть изображение с CSS: width:100%;

Теперь изображение вокруг 560px высокое, но я хочу только выбрать 300 пикселей изображения, отрезая верхнюю и нижнюю части изображения, не сжимая его.

Можно ли это сделать?

Я просмотрел crop, но вам нужно выбрать части для этого, и поэтому он не будет работать при попытке получить только середину.

Ответы

Ответ 1

Попробуйте это. Это использует значение CSS для клипа. Это было упомянуто в сообщении @Sam Jacob.

<style>
.clip-me {  
  position: absolute;
  clip: rect(110px, 160px, 170px, 60px); 
  /* values describe a top/left point and bottom/right point */

  clip-path: inset(10px 20px 30px 40px); /* or "none" */
  /* values are from-top, from-right, from-bottom, from-left */

} 
</style>
<img class="clip-me" src="thing-to-be-clipped.png">

Примечание. Это свойство CSS не работает в IE.

Ответ 2

Использовать путь клипа

img {
    position: absolute;
    clip: rect(0, 100px, 100px, 0); /* clip: shape(top, right, bottom, left);*/
}

Изменить: как указано в комментарии, позиция должна быть абсолютной или фиксированной для этого, чтобы работать

Если вы не хотите, чтобы позиция была абсолютной или фиксированной, установите изображение, которое вы хотите отобразить в качестве фона в контейнере (td, div, span и т.д.), а затем отрегулируйте положение фона, чтобы получить спрайт, который вы хотите.

В качестве страницы mozilla здесь говорится, что использование клипа не является веб-стандартом, учитывая использование клипа или фоновой позиции для достижения этого.

img{  

  /* deprecated version */
  position: absolute; /* absolute or fixed positioning required */
  clip: rect(110px, 160px, 170px, 60px); /* or "auto" */
  /* values descript a top/left point and bottom/right point */

  /* current version (doesn't require positioning) */
  clip-path: inset(10px 20px 30px 40px); /* or "none" */
  /* values are from-top, from-right, from-bottom, from-left */

}

Подробное описание здесь

Ответ 3

Поместите отрицательный margin-top в ваше изображение, родитель должен будет overflow: hidden;

Ответ 4

Вы можете использовать clip-path:

/* values are from-top, from-right, from-bottom, from-left */
.clip {
    clip-path: polygon(5% 5%, 80% 5%, 80% 60%, 90% 60%, 5% 60%);
    -webkit-clip-path: polygon(5% 5%, 80% 5%, 80% 60%, 90% 60%, 5% 60%);
}

Вот пример jsfiddle: http://jsfiddle.net/q08g3948/1/

Ответ 5

Вместо этого вы можете использовать background-position (что было бы вполне совместимо с браузером).

Я знаю, что вы указали "нет фонового изображения", но это можно добавить динамически с помощью script, так как при необходимости может быть фоновая позиция.

Быстрый выбор:

div{
  background:url(http://lorempixel.com/300/300);
  background-position:0 -100px;
  height:100px;
  width:300px;
  
  }

<div></div>

<br/><br/>Original
<br/><br/>
<img src="http://lorempixel.com/300/300"/>

Ответ 6

Используйте относительное позиционированное div + абсолютное позиционированное изображение. Используйте top: -999px; bottom: -999px; margin-top: auto; margin-bottom: auto; для вертикального центрирования изображения. Абсолютно отзывчивый. Никаких значений жесткого кодирования или процентных значений.

.image-wrap {
  position: relative;
  overflow: hidden;
  /* fixed height */
  height: 300px;
  /* for demonstration */
  margin-top: 1em;
  margin-bottom: 1em;
  box-shadow: 0 0 .5em red;
}
.image-wrap img {
  position: absolute;
  /* fit horizontally */
  width: 100%;
  height: auto;
  /* center vertically */
  top: -1000px;
  bottom: -1000px;
  margin-top: auto;
  margin-bottom: auto;
}

<div class="image-wrap">
  <img src="http://lorempixel.com/600/600/sports/4" width="600" height="600">
</div>
<div class="image-wrap">
  <img src="http://lorempixel.com/600/600/sports/5" width="600" height="600">
</div>