Как реализовать масштаб с сохранением пропорций на css?

Question

[vasIvas]

Есть картинка, которая помещена в контейнер и которой нужно изменить масштаб сохраняя при этом пропорции и при необходимости центрировать.



Как сделать это на js я знаю. Но прежде чем это сделать захотелось узнать, можно ли тоже самое сделать на языке css, который должен иметь такие возможности на нативном уровне. Можно и если да, то как?

Answer 1

[Максим Тимофеев]

Картинку на бэкгроунд и background-size:cover;
Или прописать width или height, если что-то одно, то второе согласно пропорций.

Answer 2

[Marevin]

Можно еще увеличивать с помощью CSS3(transform): jsfiddle.net/p4o5j2ty/1

Comments

[vasIvas]

С помощью bg у меня получилось. А как можно с помощью transform?
Ведь чтобы рассчитать коэффициент для скейла, нужно знать применять математику. Но в css это же нельзя?

[Marevin]

Да, не получится в пикселях, там только в процентах.

[vasIvas]

Marevin: не понял :)

[Marevin]

Указывать значение можно только в процентах. А пропорции сохраняются если второе значение не указывать.

[vasIvas]

Marevin: сорри, не внимательно Ваш пример изучил. Спасибо.

[Максим Тимофеев]

vasIvas: Частично математика в css есть, с помощью calc()

Answer 3

[Иван Дрожжин]

Может так?
background: url(/img.png) top center;

Comments

[Максим Тимофеев]

Этот вариант не маштабирует изображение, да и что бы центрировать надо не top center, а 50% 50%