Имитация background-image для img возможна?

Question

[Гриша Никольский]

Привет. Я пишу страничку, где для каждой "новости" есть своя картинка. Мне нужно сделать так, чтобы картинка обрезалась, если выделяемое для нее место меньше, чем она сама. Как это происходит со свойством background-image (cover). При этом мне очень приспичило картинку добавлять именно в HTML, то бишь через <img> тег. Возможно ли это?

Answer 1

[Максим]

для изображения :

img{
 display:block;
 max-width:100%;
 height:auto;
 object-fit:contain;
}

Comments

[Гриша Никольский]

Я не хочу помещать картинку полностью, я хочу сделать из такой картинки: prntscr.com/cu4fzw
вот такую prntscr.com/cu4g7s в шапке новости. Обрезать в PS не вариант, т.к у заказчика должна быть возможность в HTML менять картинку.

[Максим]

Гриша Никольский: можно и так , overflow:hidden; width:; height:; и делов на 1 минутку

[Anton Bobylev]

Можно использовать object-fit: cover, однако можно сразу попрощаться с поддержкой IE и EDGE.

[Гриша Никольский]

dpigo: Спасибо, учту для будущего. Вдруг EDGE все-таки станет на уровне тех же Chrome и Opera :) На словах сплошные инновации, а на деле ни-че-го. Может добавить поддержку CSS свойства так трудозатратно, а я тут бедными Microsoft не доволен? )

[Максим]

Гриша Никольский: вы ещё о сафари не знаете ! или андроидоский стандартный броузер - такое же гамно как и IE + EDGE , хотя EDGE не плохой же - только стили под него писать сложно

[Anton Bobylev]

Максим Жаров: Однако все они в актуальной версии поддерживают object-fit, а браузеры от микрософт - нет.

[Гриша Никольский]

Максим Жаров: Сафари не нравится, но он входит в WebKit, поэтому с версткой для него проблем нет вроде бы... Хотя может я чего-то не знаю?

[Максим]

dpigo: ну так то да ! мелкомягкие тупят

[Максим]

Гриша Никольский: не совсем всё поддерживает , тоже хитрожопый браузер