изображения из нескольких столбцов, которые полностью заполняют окно браузера
0
Я хочу иметь много кликов, чтобы покрыть ширину окна браузера. Так что нет места ни одной стороне. Идеально id, как отдельные изображения, чтобы оставаться на 180x180 пикселей в размерах, но если их проще, они могут изменить размер, в зависимости от окна браузера. Просто нужно заполнить пространство. В настоящий момент, если я сделаю содержащий div больше тела, он создает переполнение пространства справа. Если это имеет смысл.
Это мой код: - http://jsfiddle.net/ZPTBB/
Вот как мне хотелось бы выглядеть: http://www.karen.hunter.myzen.co.uk/pinewood/image_so.jpg
Возможно, ему нужен запрос????
Благодарим вас за помощь.
Мой код: -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
/* Editable Multiple Image Area */
.image-container {width:100%; margin:0; padding:0; height:360px; overflow:hidden;}
.image{position:relative;float:left;width:188px;height:188px; margin:0; padding:0;}
.image img {position:absolute;z-index:1;left:0;top:0;}
.image:hover div {display:block!important; }
.image img:hover div {display:none;position:absolute;z-index:2; width:100%; height:100%; background:red;}
.hoverimg {display:none;position:absolute;z-index:2; width:100%; height:100%; background:red;}
</style>
</head>
<body>
<!-- IMAGE CONTAINER -->
<div class="image-container">
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
</div><!-- IMAGE CONTAINER -->
</body>
</html>
-
0mozilla.org/en-US/about/?icn=tabz - Вы ищете что-то подобное?Nitesh
1 ответ
0
Лучший ответ
Добавьте несколько дополнительных контейнеров, которые могут содержать переполненные изображения:
.image-container {
width:100%;
height:360px;
overflow:hidden;
}
.image-container-overflow {
width: 100%;
padding-right:187px; /* assuming 188px width for image */
height: 360px;
position: relative;
}
.image-container-actual {
width: 100%;
height: 360px;
position: absolute;
top: 0;
left: 0
}
Первый принимает 100% + 187px через прописку, следующий занимает эту сумму по абсолютному позиционированию
Willem Van Bockstal
Поделиться
-
0Ты гений! Огромное спасибо. Как бы я сделал их отзывчивыми, чтобы они масштабировались с помощью браузера?
-
0Вы можете использовать адаптивный трюк с отступами и размерами блоков для создания адаптивного контейнера. jsfiddle.net/willemvb/xNdzz/1
Ещё вопросы
- 0Как воссоздать объект JSON
- 0Как использовать попсовер AngularStrap в сервисе
- 0Аккордеонные данные сетки
- 0повторение ассоциативных массивов занимает слишком много времени
- 0Не могу знать поведение клика на отключенном элементе
- 1Измерение точности предсказания для версии Android для tenorflow-Lite
- 0Поворот 3D камеры с помощью DirectX11
- 1d3.behavior.zoom () перемещает график в угол вместо центра
- 0Сохраните файл CSV в папке пользователя на компьютере пользователя.
- 0Обновление выпадающего списка из кода с использованием Javascript / JQuery
- 1Совпадения с регулярными выражениями
- 0XChat 2 возвращает «No xchat_plugin_init symbol» для библиотеки DLL
- 1unity3d - Как отключить кнопки на GUI.Box, когда другой GUI.Box находится сверху?
- 0MYSQL третье внутреннее объединение не работает
- 0C ++ Как я могу получить определенную строку текстового файла
- 0Я хочу выбрать каждое значение в раскрывающемся списке, и он будет динамически выполнять модульное тестирование с использованием транспортира
- 1CopyTo при использовании файлов xlsx выдает ошибку при открытии
- 0Использование всплывающей подсказки jquery несколько раз на одной странице
- 1Компаратор работает для моего ArrayList, но код выглядит неправильно?
- 0JQuery строка для номера обратно в строку
- 0Переполнение HTML не работает для TD и концепция переполнения для TR
- 0Javascript (NodeJs) - Преобразование массивов и объектов в массовую вставку в MySQL (Sequelize)
- 0Mysqli запрос достаточно быстро? Или есть другой способ?
- 1Почему у меня есть 3 темы здесь?
- 1Форматирование файла в список с ценой, названием продукта и количеством
- 0Читайте информацию о компоновщике из dll [дубликата]
- 0Вставить элемент в 2D вектор C ++
- 1Как приостановить / возобновить видео в Exoplayer?
- 0MySQL Connector не работает с псевдонимами таблиц
- 0Не можете получить значение из класса в C ++?
- 1Как справиться с игровым потоком?
- 0Динамический CSS с AnguarJS / Ionic Framework
- 1Проверка значений NaN в кадре данных pandas со столбцами int8
- 0Как создать макет сайта с полным окном просмотра
- 0ошибка: нет соответствующей функции для вызова const
- 1Установка значения из одного класса в другой в Java
- 1Поле со списком asp.net mvc
- 0Использовать селекторы jQuery рекурсивно?
- 0Глядя, чтобы округлить цифры в столбце [дубликаты]
- 1Постоянные функции над глобальными переменными?
- 0Ссылка на файл .o, скомпилированный в Ubuntu с помощью cygwin
- 0Открытие локального файла XML в Google Chrome
- 0Бесконечный цикл Date на одном сервере, но работает на другом и localhost
- 1Как добавить различные editText в один TextView
- 0Использование среза Javascript внутри углового выражения
- 1Загрузите файлы на S3 с Python (сохраняя оригинальную структуру папок) с правильным типом MIME
- 1Нахождение и ранжирование интервалов данных
- 1Вызов метода из Native dll работает в первый раз, сбои во второй раз (из-за модулей fortran)?
- 0Инициализация базы данных Ghost при новой установке
- 1Как выделить таблицу строк, если дано условие?
