Как управлять img через css?

Question

[David Halkin]

Добрейшего времени суток!)
как не странно, но это аут)) мне в продже надо юзать имаги 2х (именно тег img), без вот этих всех вариаций для ритины и тд. Просто будет загружаться 1 имага и мне её надо уменьшить в 2 раза пропорционально. думал что это просто) но не пошло)
в итоге имага уменьшается, а вот у родителя остается место.(красный бг) и вот как быть? какие варианты?
p/s/ управлять пропорциями надо только через css.

https://codepen.io/northfire/pen/mdqPgoo

Comments

[inkShio]

object-fit ?

[David Halkin]

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

[Ankhena]

David Halkin, ну логично, вы ведь сказали картинке: займи 50% родительского блока.
Вариант такой: сначала сделать блок той ширины, которой должна быть картинка, а для img width 100%

[David Halkin]

Ankhena, нельзя родителем никак упаравлять. блок должен остаться блоком без каких либо модификаторов и стилей.
P/s/ рад видеть снова)

[Ankhena]

David Halkin, тогда придется задавать размер самой картинке в px, vw или типа того.
Короче, сначала понять картинка зависит от размера блока или блок от размера картинки.

Почему нельзя обертке задавать размеры?

Лучше показали бы кусок макета.

А то пока выходит, что нужно на js что-нибудь вычислять

Answer 1

[Сергей delphinpro]

При таких вводных, мне кажется нормального решения нет.
Если не смущает статус Non-standard, то подойдёт свойство zoom
https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
Support: https://caniuse.com/css-zoom

img {
  zoom: 0.5;
}

Comments

[David Halkin]

ооо, привет ие6 )) давно его не видел в коде. но и оно не пашет

[Сергей delphinpro]

David Halkin, оно пашет, я проверял. вы по ссылкам ходили?

[David Halkin]

Сергей delphinpro, вы только гугл хром юзаете?) в фф оно не пашет

[Сергей delphinpro]

David Halkin, ну правильно. я же всё написал – решения с такими вводными нет,
это нестандарт, плюс дал ссылку на caniuse.