Адаптивный дизайн

12
SeVlad
На сайте с 03.11.2008
Offline
1609
#11
NCom:
Я имею ввиду средствами css подстраивать размер картинки под размер окна браузера.

Основная задача - уменьшить ОБЪЁМ картинки. Для этого лучше всего сделать несколько типоразмеров (напр. 1200, 600, 300, 150px ). А вот "по мелочи" (скажем до 450) уже уменьшать как ты говоришь - html/css.

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

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.
Savery
На сайте с 25.07.2006
Offline
127
#12
SeVlad:
Ну и что с того?
Генерить разные размеры желательно при загрузке. Но при этом ничто не мешает перегенерировать 1 раз(!) уже загруженные.
И показывать нужные уже в зависимости от разрешения экрана.


Делается 2-3 типоразмера. А необходимость "немного ужать при выводе" решается html/css.

АПД. Стоит почитать.

Интересная статья. Но проблема в том, что в данном конкретном случае все картинки у меня на сайте еще и увеличиваются. То есть малой кровью уже отделаться не удастся и это решение совсем другого уровня.

Насколько я понимаю, пока не существует адекватного решения этой проблемы.

SeVlad
На сайте с 03.11.2008
Offline
1609
#13
Savery:
Но проблема в том, что в данном конкретном случае все картинки у меня на сайте еще и увеличиваются.

Не проблема вообще :) :

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

ну или не на полное, то на ближайшее к побольше.

Savery
На сайте с 25.07.2006
Offline
127
#14
SeVlad:
Не проблема вообще :) :
ну или не на полное, то на ближайшее к побольше.

В моем случае, ширина миниатюры 650px.

Мне нужно:

- создавать вторую миниатюру, скажем, на 350px

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

- процентов 30 дополнительного места на диске

- дополнительные ресурсы сервера

Стоит ли вобще овчинка выделки?)

SeVlad
На сайте с 03.11.2008
Offline
1609
#15
Savery:
добавить скрипт на сервер, который будет решать какое изображение отдать.

Это можно поручить не скрипту, а media. Мы ж говорим об адаптивной вёрстке :)

А можно и ява-скрипту (аяксу).

Savery:
процентов 30 дополнительного места на диске

Это да. Мб даже больше.

Savery:
дополнительные ресурсы сервера

Никаких доп. ресурсов (кроме места на винте). Даже наоборот - они уменьшатся за счет уменьшения передаваемых объемов.

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

psics
На сайте с 02.04.2009
Offline
130
#16

А если вот так определять ширину экрана и высоту аналогично.

$width='<script>var ScreenWidth = screen.width; document.write(ScreenWidth);</script>';

При заливке фото режется на резличные варианты (какие нужны для медиа)

И дальше условие если ширина такая-то использовать такойто размер фото...

Ну это правда я думаю реально сделать, но помучиться придется)

vlad00777
На сайте с 24.12.2009
Offline
119
#17
Savery:
Получается, что изображения нужно уменьшать до какого-то среднего размера, поэтому такое решение скорее подходит для статичных сайтов.

Я делал 4 размера картинок и подставлял в src через скрипт буквы: f,l,m,s соотв. размеры картинок. И плюс к этому всему lazy load, если есть необходимость.

---------- Добавлено 04.03.2015 в 21:31 ----------

Savery:
добавить скрипт на сервер, который будет решать какое изображение отдать.

И как вы планируете на сервере определить разрешение экрана? Максимум девайс с которого зашли.

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
psics
На сайте с 02.04.2009
Offline
130
#18
vlad00777:
И как вы планируете на сервере определить разрешение экрана? Максимум девайс с которого зашли.

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

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий