Я пытаюсь создать галерею изображений с помощью масонства, и изображения будут перенаправлены при изменении размера браузера.
Однако, поскольку я использую фиксированную ширину 150 пикселей для уменьшенных изображений (следовательно, фактический большой файл изображения не загружен), но я не могу удалить промежутки доступа для сторон контейнера изображений, поскольку он будет масштабироваться на основе размер экрана в процентах используется для ширины.
Макет сайта выглядит так:
Обратите внимание, что есть избыточное расстояние справа от контейнера изображения. В итоге,
Как сделать шкалу контейнера размером сетки изображений масонства, поскольку контейнер изображения вычисляется на основе ширины через процент?
Имеет ли смысл фиксировать изображение до ширины 150 пикселей? Если нет, то какой предпочтительный метод отображения эскизов для экранов с различными размерами?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App</title>
<link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" href="/static/css/reset.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/static/js/masonry.pkgd.min.js"></script>
</head>
<body>
<div id="wrapper">
<!-- the header and navigation -->
<div id="header">
<div id="navigation">
<ul>
<li><a href="#">Navigation1</a></li>
<li><a href="#">Navigation2</a></li>
</ul>
</div>
</div>
<!-- the content -->
<div id="content">
<!--- Image container -->
<div id="gallery_container">
<ul>
<li>
<img src="http://127.0.0.1:8001/media/images/d4RYJ4U_1.jpg" />
</li>
<li>
<img src="http://127.0.0.1:8001/media/images/hJLK7.jpg" />
</li>
<li>
<img src="http://127.0.0.1:8001/media/images/vx7IB5M.jpg" />
</li>
<li>
<img src="http://127.0.0.1:8001/media/images/9wMgVOw.png" />
</li>
</ul>
</div>
<!--Articles sidebar -->
<div id="sidebar">
<p>Sidebar</p>
</div>
<!-- the footer -->
<div id="footer">
<p>Footer</p>
</div>
</div>
<script>
var columns;
$(document).ready(function() {
$('#gallery_container').masonry({
gutter: 12,
itemSelector: '#gallery_container ul li img',
columnWidth: 150
});
});
</script>
</body>
</html>
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%;
}
#header {
margin-right: 1.0416667%; /* 10 div 960 */
margin-left: 1.0416667%; /* 10 div 960 */
width: 97.9166667%; /* 940 div 960 */
background-color: #779307;
}
#navigation {
padding-bottom: 25px;
margin-top: 26px;
margin-left: -1.0416667%; /* 10 div 960 */
padding-right: 1.0416667%; /* 10 div 960 */
padding-left: 1.0416667%; /* 10 div 960 */
width: 97.9166667%; /* 940 div 960 */
}
#navigation ul li {
display: inline;
margin-right: 2.6595745%; /* 25 div 940 */
}
#navigation ul li a {
height: 42px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, "Lucida Grande", Verdana, sans-serif;
font-size: 27px;
color: black;
}
#content {
margin-top: 58px;
margin-right: 1.0416667%; /* 10 div 960 */
float: right;
background-color: #dedede;
width: 72.7083333%; /* 698 div 960 */
}
#sidebar {
border-right-color: #e8e8e8;
border-right-style: solid;
border-right-width: 2px;
margin-top: 58px;
padding-right: 1.0416667%; /* 10 div 960 */
margin-right: 1.0416667%; /* 10 div 960 */
float: left;
width: 22.7083333%; /* 218 div 960 */
background-color: #fe9c00;
}
#footer {
float: left;
margin-top: 20px;
margin-right: 1.0416667%; /* 10 div 960 */
margin-left: 1.0416667%; /* 10 div 960 */
clear: both;
width: 97.9166667%; /* 940 div 960 */
background-color: #663300;
}
#gallery_container {
list-style-type: none;
padding: 0px;
margin: 0px;
background-color: #302200;
}
#gallery_container ul li {
display: inline;
}
#gallery_container ul li img {
padding-top: 10px;
}
Я думаю, что ваша скрипка не работает должным образом... Во всяком случае, есть опция "isFitWidth": true
чтобы намекнуть на кладку, чтобы заполнить все горизонтальное пространство. Попробуй.