Возможно ли сделать на чистом css: уменьшение картинки при увеличении экрана?

Question

[Станислав Пономарев]

Народ, как сделать, чтоб картинка равномерно уменьшалась при увеличение экрана?

Comments

[ThunderCat]

как вы экран растягивать будете? Домкратом?

[Станислав Пономарев]

ThunderCat, разными разрешениями экранов

[ThunderCat]

Станислав Пономарев, то есть при разрешении 800*600 картинка 200*300, а при 1024*768 - 150*200? По вашей логике чем больше экран, тем меньше картинка. Так на ретине вы ее вообще рассмотреть не сможете...

[Станислав Пономарев]

ThunderCat, именно так. А мне не потребуется доходить выше 768px. Начинается на 320 заканчивается на 768

[ThunderCat]

Станислав Пономарев, медиа запросы или width: calc() и считайте от 100vw сколько нужно.

[Rustam Bainazarov]

Относительные единицы, нет? :))

Проценты (относительно родителя), vw (относительно ширины viewport).

[Станислав Пономарев]

ThunderCat, разве это подойдет в моем случае? От медиа до медиа картинка не будет уменьшаться. Изначально на 320px экране картинка занимает 100% и чем больше экран тем меньше картинка по процентам. Через медиа будут скачки и между брекпоинтами картинка будет стоять на месте

[Станислав Пономарев]

Рустам Байназаров, ну так и что мне даст проценты здесь? Экран будет увеличиваться, соответственно картинка тоже. А мне нужно наоборот

[Rustam Bainazarov]

Станислав Пономарев, вы смеётесь? Процент от размера родителя/экрана. С чего оно должно становиться больше, чем меньше экран?

Откройте в новой вкладке:
https://jsfiddle.net/naLud7o8/1/show

Или же я понял неправильно задачу?

[Станислав Пономарев]

Рустам Байназаров, почему? Есть картинка 100% по ширине при экране на 320. Если экран будет больше, то и картинка будет тоже 100%. Если менять через медиа, будет криво, задавать проценты картинке каждые 50px к увеличению экрана. При уменьшении экрана картинка уменьшается равномерно, если стоит в относительных, так как сделать, чтоб она уменьшалась при увеличении экран

[Rustam Bainazarov]

Станислав Пономарев, я снова не понял, но предположу, что вам нужен max-width в сочетании с width на процентах:
https://jsfiddle.net/bftej2m6/show

А если, следуя второму моему пониманию задачи, что нужно сделать реально в обратную сторону (больше viewport — меньше картинка), то это уже только на JS, на CSS такого сделать нельзя.

[Станислав Пономарев]

Рустам Байназаров, именно в обратную сторону. Уже так и подумал, что нужен js. Спасибо

[Rustam Bainazarov]

Станислав Пономарев, внезапно. Забавная задача. Тогда только JS. Не секрет, для какого дизайна такое могло понадобится?

Answer 1

[Aetae]

Как-то так:
Вопрос лишь нахрена?)

Comments

[Станислав Пономарев]

Круто! Это задачка была на курсе) Там задавали вопрос, можно ли так сделать на css только

Answer 2

[ThunderCat]

@mediaи стили для изображения чем не устраивают?