Как центрировать img по центру при уменьшении размера экрана?

Question

[AlexaDin]

Как центрировать img по центру при уменьшении размера экрана? То есть есть изображение, оно вставляется пользователем, поэтому прописать его через css background возможности нет. У изображения большая ширина и маленькая высота. Если использовать просто width: 100%, то при уменьшении размера экрана, на мобильных у изображения становится очень маленькая высота и выглядит все это некрасиво. Хотелось бы оставлять обычную высоту, а вот ширину обрезать по бокам, чтобы в картинке оставался ее центр. Это можно как сделать посредством css или может скрипта?

Answer 1

[ThunderCat]

<img src="some.jpg" style="height: 90px; display: block; position: absolute; margin: auto; top: -9999px;bottom: -9999px;left: -9999px;right: -9999px;">

Comments

[Ярослав Иванов]

top: -9999px это еще что такое.
нуля достаточно.

[ThunderCat]

Ярослав Иванов, хак под ие уже не помню какой, 9 чтоле, кароче, так точно работает )

[Ярослав Иванов]

ThunderCat, а если нули везде то работать не будет ? хм.

[Ярослав Иванов]

ThunderCat, глаза режет отрицательные значения))

[ThunderCat]

Ярослав Иванов, было перенесено из рабочих проектв, а в те добавлено когда возникли проблемы с позиционированием в старых браузерах, кто не в курсе - есть учреждения которые юзают жестокое легаси, и приходится вот так изголяться иногда. Но работает. Но выглядит стремно, согласен. Если нет необходимости в поддержке всяких старичков, можно тупо на нолики сменить.

Answer 2

[tyzberd]

https://css-tricks.com/almanac/properties/o/object-fit/
и для старых браузеров https://github.com/bfred-it/object-fit-images

Comments

[tyzberd]

+ можно сделать что то типа padding-bottom
https://www.smashingmagazine.com/2013/09/responsiv...

Answer 3

[Василий Г.]

пропишите картинку в style

<div class="cover" style="background-image: url(path/to/user/image.jpg);">
  ...
</div>

и для класа .cover пропишите background-size