Как с помощью CSS сделать обрезку картинки до определенного размера?

Question

[Иван Новиков]

Добрый день уважаемые люди!
У меня такой вопрос:
Допустим есть блок 200х500 пкс, там умещается картинка 200х300 пкс(сверху), и текст 200х300 пкс (соответственно снизу).
Вот заливаю я картинку на сервер, ставлю img src() + класс, и картинка чудесным образом обрезается до размеров 200х300 пкс, и нет никаких белых полей по бокам и сверху/снизу, не растянута и не сжата(т.е. соотношение тоже самое как и большой картинки).
Как это можно реализовать? css или js?

Answer 1

[Риточка Снегирёва]

Вот вам правильный ответ =)

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

Comments

[Habitat Horsewithyou]

почему ответом не отметили хз))))

[Дима]

Отличное свойство, спасибо!

[BATPYIIIKOB]

P.S.: В IE object-fit не работает!

[Риточка Снегирёва]

Евгений Прозоров, да, но благо начиная с microsoft edge была добавлена поддержка.

[BATPYIIIKOB]

Риточка Снегирёва, edge и ie - разные браузеры. Способ удобный, но увы не всегда применим, особенно в бюджетных госучреждениях.

[nikolay55rst]

класс! обрезаемая область схлапывается, то что нужно

[T-ed]

Дай бог тебе здоровья)

[petro315]

Спасибо вам огромное!
Сегодня столкнулся с необходимостью обрезать картинку под соотношение 1:1 и заданную ширину/высоту, пошёл читать как это сделать, а там...какие-то заморочки с canvas, подключение сторонних библиотек - ужас!
А оказывается, всё так просто. Всё получилось!

Answer 2

[bumbay]

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

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

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

Answer 3

[Виталий Емельянцев]

Можно не через img, а через background:

<div class='image'></div>

.image{
  width: 200px;
  height: 300px;
  background: url('ваша картинка') no-repeat center center;
  background-size: cover;
}

Картинка впишется по центру контейнера

Comments

[Иван Новиков]

Бодрый день, а если это будет блог. И будет через год 100 сообщений. И css будет расти расти и расти. Ладно мы, но пользователи!

[Виталий Емельянцев]

@novik90: сам css-файл расти не будет, если в нем вы оставите только общие стили для контейнера, а непосредственно background будете задавать в html (в style атрибуте тега контейнера). Да, использование style плохо скажется на производительности, но не так сильно, как кажется. Если же производительность имеет сильное значение - тогда css-обрезкой здесь не обойтись, нужно ужимать картинки на сервере при закачке.

[noita_kronk]

Кстати, загрузка фона у некоторых браузеров происходит "по требованию", т.е. если таких "картинок фоном" много, нижние просто не подгрузятся, пока их не захотят просмотреть. В отличие от img

Answer 4

[Alexander Sydorenko]

Этот класс растянет картинку на всю ширину блока, и автоматически построит ее высоту.

.img-reponsive {
display:block;
width:100%;
max-width:100%;
height:auto;
}

ну и похожий класс описать для варианта 100% hegit и width:auto;

1. Вы используете бутстрап, там этот код уже есть (написанный в этом примере), удалите его из своих стилей, в Ашем случае достаточно просто к картинке добавить img-responsive.
2. Если надо ограничить по высоте, то можно сделать например так:

<div class="img-block">
    <img class="img-responsive" src="assets/img/636889-1366x768(1).jpg">
</div>

ну и

.img-block {
    height: 200px;
    overflow: hidden;
}

Comments

[Евгений Петров]

max-width:100% и height:auto лишние

[Виталий Сорокин]

max-width лучше заменить на min-width

[Иван Новиков]

Может я что то не то делаю но у меня не получилось =) вот ссыль на пример papopi.ru/. если код посмотреть то видно что вторая и третья картинка выходит за край.

[Евгений Петров]

@VitalySorokin: это бессмысленно.

[Евгений Петров]

@novik90: так картинки с разным ratio стоят. Ставьте
.news {overflow: hidden;}

[Иван Новиков]

@Petroveg: частично помогло. Теперь каждая 4ая картинка на несколько пикселей меньше.

[Alexander Sydorenko]

@Petroveg: Код из одноименного класса .img-reponsive bootstrap 3.х по логике, думаю таким образом они "усилялись" для кроссбразуерности.

[Евгений Петров]

@San40: так смысла нет никакого в min и max на 100%, если стоит widt:100%. Они будут одинаковы и ничего не произойдёт.

[Евгений Петров]

@novik90: у вас картинки с разным ratio. Могу ещё раз повторить. Кабы они фоном стояли, то делов-то — contain воткнул и будь здоров. С помощью img нужно делать из одинаковыми или с ratio не большим, чем 3/2.

[Alexander Sydorenko]

@novik90: Картинки с этим классом будут иметь фиксированную ширину, и автоматическую высоту. если соотношения сторон исходных картинок не совпадают, то высота у них будет увы, разная.. и тогда как предложил @Petroveg ограничить по высоте контейнер содержащий картинку, и сделать ему обрезание через {overflow: hidden;}

[Евгений Петров]

Другой вариант — сделать их заведомо больше (скажем, 110%), сдвинуть влево на 5% и нехай себе края обрезаются.

[Иван Новиков]

Всем спасибо!!
Вроде решилось. (papopi.ru вторая строка картинок) Бутсраповскому классу приписал
width: auto;
height: 100%;
Ну на первый взгляд ровно. Буду тыкать дальше=)
Еще раз всем спасибо!

[Евгений Петров]

И опять... width: auto — лишнее.

[Евгений Петров]

@novik90: и всё равно нарвётесь на картинку, у которой ratio будет меньше, чем 3/2. И тогда появится отступ с краёв.

[Иван Новиков]

@Petroveg: Ну все! Убрал я ширину)
Рано или поздно все равно попадется картинка не соответствующая требованиям. Тогда надо будет сделать общую (для всех таких неказистых картинок) картинку которая будет сама за себя говорить "просмотр при нажатии на картинку". Т.е. просто увеличительное стекло с плюсиком.

Answer 5

[Рустамка Воронцов]

overflow: hodden.
jsfiddle.net/Urvin/kJYkz

Answer 6

[Семён Федосеев]

Если нужны картинки разного ракурса под различную ширину экрана:
https://habr.com/ru/post/572368/

<picture>
  <source
    media="(max-width: 480px)"
    srcset="
      cropped-bears-480x270.jpg 480w,
      cropped-bears-960x540.jpg 960w
    "
  />
  <source
    media="(max-width: 960px)"
    srcset="bears-960x540.jpg 960w, bears-1920x1080.jpg 1920w"
  />
  <img src="bears-1920x1080.jpg" alt="bears" />
</picture>