LINUX.ORG.RU

Резиновая отцентрованная картинка css


0

1

Делаю фотоальбом, в нем есть картинки разного размера и разных пропорций. Нужен полноэкранный режим, где картинка вне зависимости от размера будет не более экрана, не потеряла пропорций, в случае если она меньше не увеличивалась, и была по центру. Вся работа идет с position:fixed; и кнопкой закрыть сверху (используется не 100% области экрана) Что посоветуете?

★★

посоветую не ресайзить картинки средствами браузера. ДА, если картинка беспросветное говно, то по барабану, а остальные даже автоматически нельзя ресайзить ибо там либо вытеки_глазное_яблоко получается либо мыло если на автомате, зависит от содержимого картинки. Ну а браузером просто говно получается.

_________

//wfrr

anonymous
()
Ответ на: комментарий от anonymous

не ресайзить, картинки большие, чтобы если заходишь в fullhd моника оно было нормально, а если с нетбука, то влезало в экран. Картинки не совсем фотки, это больше скриншоты интерфейса и т.д. Как посоветуешь в этом случае поступить?

Bupyc ★★
() автор топика
Ответ на: комментарий от Bupyc

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

_________

//wfrr

anonymous
()
Ответ на: комментарий от anonymous

У меня есть мини слайдшоу и при клике оно разворачивается на весь экран где можно их переключать. Мне надо реализовать именно так.

Bupyc ★★
() автор топика
Ответ на: комментарий от Bupyc

Если надо именно так то зачем спрашиваешь «как» ? Если надо удобнее - то делается три картинки около 100px для просмотра в списках разных, например в списке последних добавленных, 1000px для просмотра «так», и для любителей «покрупнее» тупо выдается сырая фотография на весь экран со скроллбарами, даже если у ни мобилка.

и да заморачиваться на нетубчников - смысла не вижу посмотри по статистике всяких веб счетчиков сколько мелких разрешений экрана у твоей целевой аудитории. Может там полтора процента.

_________

//wfrr

anonymous
()
Ответ на: комментарий от anonymous

Это фото альбом со стилями переключениями и эффектами надо чтобы все влезало и было красиво. Я говорю как надо мне и спрашиваю как это реализовать на css и возможно js что нежелательно.

Bupyc ★★
() автор топика

Складывается впечатление, что какая-то элементарная задачка. Что-то типа:

img {
max-width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
}
Мне было бы стыдно о таком спрашивать, хотя молодежь не стыдится показывать неспособность к самостоятельному изучению чего-либо.

iVS ★★★★★
()
Ответ на: комментарий от Bupyc

нужно поэкспериментировать дополнительно с max-height. Не уверен, что задача в общем случае решается средствами CSS.

iVS ★★★★★
()
Ответ на: комментарий от iVS

При этом, вычисляя max-height, элемент должен знать высоту родительского элемента. В случае, если последний - это body, то

body {
position: absolute;
height: 100%;
}
задаёт высоту body равной высоте окна браузера. Правило
height: 100%;
для дочернего элемента задаёт ему высоту родительского, при этом у последнего должно быть
position: absolute;
и так далее, пока не спуститесь к своему элементу. Конкретно, применение к нему
position: fixed;
роли не играет.

iVS ★★★★★
()
Ответ на: комментарий от note173

> да, но только в ie6

Высота дочернего элемента будет отсчитываться от размера окна браузера. Проверено неоднократно и работает на всех браузерах.

iVS ★★★★★
()

Для изображений используются тег img!

Делать изображения фоном, когда они фоном не подразумеваются (т. е. на них ничего нет) - абсурд, быдлокод, глупость и еще так только му делают.

<img src=«img.png» width=«100%»> и будет тебе счастье.

moscwich
()
Ответ на: комментарий от note173

Да, min-height, max-height так использовать нельзя.

iVS ★★★★★
()

в общем случае для задачи не только жс но и сервер-сайд подключать, и еще лучше сразу оговорить какие-то рамки-ограничения

trashymichael ★★★
()
Ответ на: комментарий от Deleted

> Плюсую белку. То, как браузеры ресайзят…

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

iVS ★★★★★
()
Ответ на: комментарий от iVS

Если ресайз без всяких техник сглаживания это «неплохо», то да :}

Deleted
()

тут уже сказали ключевые слова, но ты всё равно сходи на http://alistapart.com и спроси у тамошнего поиска статью «responsive web design» ;)

aol ★★★★★
()

всё равно тебе придется делать уменьшенные изображения, которые можно «без последствий» отобразить в твоем дизайне. всё остальное уже будет потом, со скроллами и т.п.

под «без последствий» я имею ввиду, что, например, основная полоса для контента у тебя на сайте 70%, при клиентском разрешении 1024х768, картинка «без последствий» должна быть не более 716 пикселов в ширину.

вообще, на alistapart-e интересные статьи!

aol ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.