#html #browser #width #scale
#HTML #браузер #ширина #масштаб
Вопрос:
По профессии я 3D-художник, однако недавно я пытался создать веб-сайт для себя с нуля. Мои потребности очень просты — широкоэкранный веб-сайт, состоящий из фонового изображения и миниатюр, при нажатии на которые загружается всплывающее окно overlay, показывающее дополнительную информацию об этом конкретном контенте. Наложение всплывающих окон здесь не проблема.
Моя текущая проблема в том, что мне нужно, чтобы моя страница всегда занимала 100% ширины браузера, так что это означает, что она должна масштабироваться — вместе со всем содержимым (эскизами) в ней. Я создал свою первую попытку на экране с разрешением 1920х1080, и результат был идеальным, однако, когда я загрузил его на свой ноутбук с экраном 1366, это привело к тому, что мне была показана только часть полной страницы, и я получил полосы прокрутки для просмотра остальной части.
Я размещаю эскизы через px, поскольку я получил значения из Photoshop, но я понимаю, что мои потребности могут быть выполнены только через% — как я могу это преодолеть?
Вот наглядное изображение моей настройки http://i.imgur.com/ZdgTRYk.jpg
Серый цвет — окно браузера, красный — фон, зеленый — содержимое
Все должно масштабироваться с одинаковой скоростью.
Вот мой HTML
<body>
<div id="background">
<img src="images/background.png">
<div id="box3thumb">
img src="images/box3thumb.png">
</div>
</div>
</body>
и мой CSS
#background {
position:relative;
left:0px;
}
#box3thumb {
position:absolute;
left:514px;
top:117px;
width:92px;
height:200px;
}
Я действительно ценю любую помощь, которую я мог бы получить по этому поводу.
Спасибо
Эллиот
Комментарии:
1. Если вы можете поместить это в jsfiddle. net было бы намного проще отладить это
Ответ №1:
хорошо, для вашего #background вы можете использовать этот css для масштабирования браузера:
#background{
width: 100%;
background: red;
}
что касается ваших эскизов, я не очень хорошо понимаю, как вы хотите их разместить, но в соответствии с вашим изображением вам нужно разместить их в строке:
#thumbnails{
display: inline-block;
margin-left: 15%;
}
% поля может варьироваться в зависимости от того, что вы хотите.
Ответ №2:
Если вы установите для тела и html-элементов вашей страницы значение
CSS:
html, body
{
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
Это предотвратит появление полос прокрутки, сохраняя при этом полную ширину и высоту экрана, независимо от разрешения. Что касается ваших миниатюр, если у вас есть определенное количество миниатюр, то вы можете установить ширину ваших миниатюр, скажем, на 10% ширины и высоты с запасом: 1%;, это позволит вам разместить примерно 64 миниатюры, но они станут маленькими, если у пользователя дерьмовое разрешение.
.thumbnail
{
position: relative;
display: inline-block;
width: 10%;
height: 10%;
margin: 1%;
}
Редактировать ——————
С такими большими миниатюрами вы могли бы сделать его более похожим на этот:
.thumbnail
{
position: relative;
display: inline-block;
width: 20%;
height: 20%;
margin: 5%%;
}
Комментарии:
1. Если вам нужен небольшой буфер между вашим фоном и окном браузера, который потребует дополнительной обработки, включая класс-оболочку, для которого задано значение ширины и высоты 100%, который использует небольшое отступление для смещения вашего содержимого.
Ответ №3:
Используйте в style.css
#background{
width: 90%;
background: red;
}
/*thumbnails*/
#thumbnails{
display: inline-block;
margin-left: 10%;
vertical-align:text-bottom;
}