CSS. Изображени(я) на всю ширину страницы

SkyKing, 289 просмотров

Есть сайт, в котором на главной странице есть блок
width:100%;
height:250px;
в нём находится изображение большой ширины, чтобы разместиться на всю ширину экрана.
Всё отлично, но экран имеет разрешение всё больше и больше.

Нужно разместить в данном блоке несколько изображений (в строку), чтобы при изменении разрешения экрана заполнялась вся ширина блока(экрана).

Примечание:
DeGoIST
пока так и есть
стоит изображение шириной более 2000 px, но это не выход
размеры экранов есть уже и 2560 px и будут больше

Примечание:
iXAPEK
... чем больше разрешение, тем больше картинок подгружать

можно подгрузить сразу много небольших картинок (скажем суммарно будет 3000 px)

в данный момент одна картинка расположена по центру блока и при разрешениях до 1920 px смотрится неплохо

Примечание:
Безруков Павел
background-repeat:repeat-x; не поможет т.к. нужны картинки разные

Примечание:
Ильдар-
поставить изображениеям св-во float:left, тогда они все будут располагаться в строку

это что-то ближе к теме
можно поконкретнее?

Примечание:
maxix
внимательно прочтите текст задания и дополнения

Примечание:
картинки собрал в одну длинную картинку с небольшими границами по краям каждого фото и применил background-repeat:repeat-x; (хотя не очень хотел этого)
получилось довольно сносно

спасибо

Ответы:

HeRUSkuu

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

DeGoIST

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

iXAPEK

честно, не врубился в вопрос.
имеешь ввиду несколько - это под каждое разрешение своя картинка?
Или чем больше разрешение, тем больше картинок подгружать?

Безруков Павел

Если я верно понял вопрос, то вы спрашиваете об автозаполнении ширины экрана изображениями...
Если я угадал то вам придёт на помощь свойство background-repeat которое определяет как будет заполняться фон элемента.
В вашем случае нужно задать значение заполнения по горизонтали:
background-repeat:repeat-x;

maxix

<table width="100%">
<tr>
<td width="...px">Левая часть блока (угловой кусок картинки)</td> // обизательно указываем ширину
<td style="background-image:url('img.jpg')">наполнение блока</td>
<td width="...px">Правая часть блока (угловой кусок картинки)</td> // обизательно указываем ширину
</tr>
</table>

DJ-Bogdan

Спокон вечная проблема - верстка дизайна под разные размеры экрана :) Причём решает её каждый по своему.

15 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.