Сделайте коробку с изображениями, подходящими для всех разрешений

Question

Сделайте коробку с изображениями, подходящими для всех разрешений

0

Я знаю, что это широкий вопрос и множество резолюций, но я подумал, что я решил, используя ширину. Это в 1920x1050: , и это с разрешением 1600x900:

Это код:

div.content {
    width: 80%;
    margin: 80px auto;
    padding: 5px;
    border: 6px inset silver;
    clear: none;
    border-radius: 0px 0px 40px 40px;
}

div.content img.small {
    width: 15.5%;
    height: 100px;
    padding: 5px;
}

Что мне нужно сделать, чтобы оно всегда выглядело как изображение 1, но если экран менее широк, то он должен быть меньше изображений, но он должен всегда соответствовать?

user3068228 14 дек. 2013, в 00:29

Источник

0

Придайте изображениям ширину в пиксели, не позволяйте им переносить строки и не показывайте переполнение их родительского элемента. white-space:nowrap заботится о не white-space:nowrap на следующую строку.
Jasper 13 дек. 2013, в 23:12
0

Это то, что у меня есть сейчас: i.imgur.com/djVDBSW.png с шириной 250, а в контент я положил пробел: nowrap;
user3068228 13 дек. 2013, в 23:32
2

Пожалуйста, создайте JSFiddle, чтобы мы могли проверить ваш код с включенными изображениями и HTML.
randak 13 дек. 2013, в 23:46
0

@user3068228 user3068228 Теперь вы должны установить overflow элемента, который создает рамку вокруг изображений. Прямо сейчас используется значение по умолчанию overflow , auto . Кроме того, JSFiddle - ваш друг, настройте ваши CSS и HTML в JSFiddle и позвольте нам поиграть с ним вместо публикации скриншотов (которые все еще полезны, но не так полезны).
Jasper 14 дек. 2013, в 01:04

Показать ещё 2 комментария

Теги:

html

css

resolution

1 ответ

Ещё вопросы

Придайте изображениям ширину в пиксели, не позволяйте им переносить строки и не показывайте переполнение их родительского элемента. white-space:nowrap заботится о не white-space:nowrap на следующую строку.
Это то, что у меня есть сейчас: i.imgur.com/djVDBSW.png с шириной 250, а в контент я положил пробел: nowrap;
Пожалуйста, создайте JSFiddle, чтобы мы могли проверить ваш код с включенными изображениями и HTML.
@user3068228 user3068228 Теперь вы должны установить overflow элемента, который создает рамку вокруг изображений. Прямо сейчас используется значение по умолчанию overflow , auto . Кроме того, JSFiddle - ваш друг, настройте ваши CSS и HTML в JSFiddle и позвольте нам поиграть с ним вместо публикации скриншотов (которые все еще полезны, но не так полезны).

xec · Answer 1 · 2013-12-13T22-56-00.000Z

Ключом к созданию современных адаптивных макетов является использование медиа-запросов. Устанавливать точки останова (используя ширину экрана в пикселях является общими), что имеет смысл для вашего макета. Например, если вы хотите показать меньше изображений в строке с шириной видового экрана 600 пикселей, что-то подобное сделало бы трюк;

.content img {
    width: 20%; /* 5 images default */
}
@media screen and (max-width: 600px) {
    .content img {
        width: 25%; /* 4 images when window is less than 500px */
    }
}

Демо в: http://jsfiddle.net/6p2yM/ (измените размер окна, чтобы увидеть, что количество изображений изменяется с размером окна)