@Fatmarmelad

Приветствую!
У экранов разных размеров разные размеры браузеров. И чтобы сохранить пропорции блоков на сайте, величины ширины и высоты нужно задавать в процентах.
Но если фотографии служат фоном для блоков, то можно, конечно, задать, чтобы фотография изменяла размеры в соответствии с блоком. Но если прописать код так, чтобы фотография сжималась-растягивалась в зависимости от размера блока, то сайт будет медленно загружаться. Какими должны быть оптимальные размеры фотографии, чтобы страница нормально загружалась и при этом сохранялись пропорции контента на экранах разных размеров? Может есть какие-то методы и т.д.?

0

@Fedor92

Сами поняли что написали?

0

@Fatmarmelad

Fedor92, я про ширину и высоту

0

@pavel666228

Fatmarmelad,Не понятно, что конкретно вы хотите узнать...Почитайте про медиа запросы ( адаптивная верстка).

0

@mrtoxas

0

@Fedor92

0

@Fatmarmelad

Размеры окна браузера на разных размерах экранов - разные и пропорции разные. Мой вопрос - как подбирать размер фотографий для фона блока с учётом этого ньюанса. Ведь если просто взять фото максимального размера , которое и на экран полностью не вмещается, и прописать код таким образом, чтобы фото втискивалось в эти рамки, страница сайта будет медленно загружаться.

0

@Fedor92

Вы очень витиевато формулируете свои мысли... Отображение сайтов на разных разрешениях - так как-то...

Если это фон, то есть волшебные свойства, такие как background-size:cover, background-size:100% auto подробнее читайте в мануалах... Для картинок есть магические свойства width:100%; height:auto подробнее тоже читайте в мануалах... Для всего остального есть вьюпорт и медиазапросы...

0

@Пурыга Никита

Если вам требуется просто адаптивное изображение, тогда можно выставить размер, который на десктопах считаете красивым, а далее проставить
Учтите, что нужно следить за
1. margin
2. padding
3. положением самой фотографии. Чтобы она не ломала положение других блоков.

Это метод для прям совсем новичков. А так, лучше почитайте про медиа запросы и то как их можно вкл/откл. на определенных размерах экрана.

Если вам нужно сделать адаптивный фон для блока используйте
Я вообще во всех проектах сразу прописываю msx-width для всех изображений.

0

@Fatmarmelad

Пурыга Никита, если нужно, чтобы фотография заняла всё окно браузера по высоте и ширине, какого бы размера фото Вы бы взяли (в px)?

0

@Пурыга Никита

Fatmarmelad, интересует именно разрешение?

Добавлено через 3 минуты
1280x853 - формат .jpg или .jpeg
svg - не имеет значения, можете хоть 1 на 1 px взять. Но учтите что SVG это код. И если вы сохраняете из какого-то грф. редактора, может быть так, что будет корявое на разных экранах.

PNG лучше не использовать на весь экран. Много весит.

1

@Fatmarmelad

даже не разрешение а именно размеры - ширина /высота. Я насколько знаю, если фото большие и им задавать cover, чтобы поместить в блок, то это увеличивает время загрузки страницы.

1

@Пурыга Никита

Написал выше, про размеры.

Добавлено через 1 минуту
Большое фото в любом случае будет увеличивать время загрузки страницы. Независимо от cover. Что с ним, что без него, клиент как грузил 1мб так и будет грузить 1мб.

1

@Fatmarmelad

Наткнулся по этой теме на информацию в книге Макфарланда Д.С. - "Большая книга CSS3".

при просмотре страницы на телефоне ширина колонки и ширина изображения могут ужаться до ширины, существенно меньшей, чем на браузере настольной системы. Это означает, что изображения на экране будут сильно уменьшены. Хотя качество изображения от этого не пострадает, вы заставите пользователей мобильных телефонов загружать файлы изображений, имеющие размер намного больше необходимого. Тем самым будет неоправданный расход трафика на большие файлы изображений, в которых нет никакой необходимости.
И самое интересное
К сожалению, пока эта проблема не имеет полноценного решения, и фактически сторонники адаптивного веб-дизайна считают ее одной из наиболее существенных проблем RWD.

Я CSS знаю плохо. Нельзя ли просто сделать несколько файлов разных размеров с одним и тем же изображением и вставлять их на страницу в соответствии с медиазапросами для разных размеров браузера?

0