Получите несколько изображений, чтобы приспособиться к размеру браузера с неизвестными размерами изображения
У меня есть небольшая проблема, которую я не могу решить.
Я делаю сайт, который показывает загруженные изображения на странице (изображения загружаются пользователями и имеют разный размер). Но, к сожалению, это не очень хорошо выглядит, потому что показывает все изображение, и если 2 не умещается рядом друг с другом на странице, то второе выталкивается на новую строку и оставляет огромный пробел рядом с изображением 1. То, что я хочу сделать, это что-то вроде этого Flickr.
Как я смогу достичь этого?
У меня есть все изображения внутри изображений DIV и все изображения DIVS находятся в DIV inhoud
HTML и PHP:
<div id="inhoud">
<?php
include('dbc.php');
$sql = "SELECT * FROM tbl_images";
$result = $dbc->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<div class="image"><img src=<?php echo "uploads/".$row['link'] ?>></img><div class="info"><p><?php echo "By " . $row['user'] ?></p></div></div>
<?php
}
} else {
echo "0 results";
}
$dbc->close();?>
</div>
CSS:
#inhoud{
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: grey;
padding-top: 100px;
}
.image{
vertical-align: top;
display: inline-block;
}
.image img{
max-width: 100%
}
Решение
Что ж, если вы хотите сделать это как Flickr — который сохраняет заданную высоту строки и имеет переменную ширину изображения — тогда вы сможете сделать это с помощью CSS.
То, что вам нужно сделать, это дать изображениям заданную высоту, а затем установить ширину на авто. Итак, если вы хотите, чтобы каждая строка имела высоту, скажем, 20%:
#inhound {
height:900px; /* if you want to use a percentage make sure its parent has a height */
}
.image img {
height:20%;
width:auto;
}
Конечно, это зависит от того, как именно вы хотите их отображать, но это основной принцип.
Другие решения
Других решений пока нет …