Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
Skarlupka
0 / 0 / 0
Регистрация: 25.03.2016
Сообщений: 13
1

Картинки разных размеров занимают свободные места

05.10.2017, 12:11. Просмотров 754. Ответов 4
Метки нет (Все метки)

Есть какойто набор картинок с разными размерами. Нужно чтобы они на сайте выглядели примерно вот так.
[del]
Картинки разных размеров занимают свободные места


Всё что удалось мне сделать это вот такая вот белеберда:
[del]
Картинки разных размеров занимают свободные места


Как мне сделать точно так же?

Вот и код который есть:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Наружная реклама</title>
    </head>
        <div class="outdoor">
            <?php foreach($files as $file): ?>
            <img src="img/<?=$dir?>/<?=$file?>">
            <?php endforeach ?>
        </div>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
.outdoor{
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 5px;
    background: #ffffff url(../img/background1.jpg) repeat;
}
.outdoor img{
    margin: 2px;
    float: left;
}
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
05.10.2017, 12:11
Ответы с готовыми решениями:

Слайдер с изображениями разных размеров
Как правильно верстать слайдер с изображениями разных размеров? Допустим чтобы...

Изменение размеров картинки
Ставлю фиксированные размеры а картинка все равно сохраняет пропорции....

Меню в виде плиток разных размеров
нужно сделать меню такого вида знаю что это типа сетки twitter bootstrap, но я...

Сделать textarea одинаковых размеров в разных браузерах
Доброго времени суток. Потребовалось использовать textarea, а он разного...

Выстроить вертикально и центровать объекты dsiplay:block разных размеров
table верстку и dsiplay:inline-block не предлагать, первый - громосткий, второй...

4
AlexZaw
572 / 568 / 265
Регистрация: 07.08.2016
Сообщений: 1,867
Завершенные тесты: 2
05.10.2017, 12:18 2
Рискну предположить что в первом случае это одна картинка, а сделать подобное можно с помощью grid, абсолютного позиционирования, либо, возможно, таблицей
0
tgarl
356 / 350 / 80
Регистрация: 15.02.2012
Сообщений: 1,338
05.10.2017, 13:48 3
Такой вариант называется кирпичики, поищите готовую js библиотеку под него
0
AlexZaw
572 / 568 / 265
Регистрация: 07.08.2016
Сообщений: 1,867
Завершенные тесты: 2
05.10.2017, 14:01 4
Цитата Сообщение от tgarl Посмотреть сообщение
Такой вариант называется кирпичики, поищите готовую js библиотеку под него
заинтересовала эта тема, попробовал поискать решение по разным словосочетаниям с кирпичиками и без - ничего не нашел, можно более конкретную наводку?
0
tgarl
356 / 350 / 80
Регистрация: 15.02.2012
Сообщений: 1,338
05.10.2017, 14:04 5
Лучший ответ Сообщение было отмечено Skarlupka как решение

Решение

библиотека masonry называется masonry . desandro . com
1
05.10.2017, 14:04
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.10.2017, 14:04

Обрезание картинки при изменении размеров окна браузера
Подскажите как сделать так, чтобы картинка, обрезалась пропорционально и слева...

Сделать квадратные картинки (ширина равна высоте), не зная их размеров
можно ли сделать картинки квадратными, тоесть ширина=высота(чтото типа...

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


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru