gpt4 book ai didi

html - 具有不同尺寸(分辨率)图片的容器全部组合在一起

转载 作者:太空宇宙 更新时间:2023-11-04 13:56:49 25 4
gpt4 key购买 nike

我有这个当前代码:

CSS:

img
{
max-width:15vw;
max-height:15vh;
position:relative;
background-color:#67615d;
display:inline-block;
text-align:justify;
}

#container
{
width:80%;
min-height:100vh;
margin:0px;
float:right;
margin:0px;
overflow:hidden;
}

#navbar
{
background-color:#67615d;
width:20%;
height:100vh;
overflow:hidden;
position:fixed;
float:left;
}



#content
{
width:100vw;
min-height:100vh;
margin:0px;
padding:0px;
overflow:hidden;
background-color:#9d948f;
}

HTML:

<html>
<body>
<div id="content">


<div id="navbar">
*stuff in the navbar*
</div>


<div id="container">
</div><img src="pic1"></img>
</div><img src="pic2"></img>
</div><img src="pic3"></img>
</div>
</div>
</body>
</html>

无论如何,将此作为我当前的代码(添加更多内容),它看起来像这样: http://i.imgur.com/9WTUNtj.jpg

这些图片只是随机截图,其他是随机图片(显然只是为了测试目的,真实的东西会有所有分辨率的图片)我从谷歌上下来了。不管怎样,我想做的是自动调整图片,使它们在尺寸不同的情况下都适合容器。

http://i.stack.imgur.com/TQCwW.png

黑框是“图片”,这就是我想要做的,但我一直搞砸了,有谁知道我将如何更改我的代码以显示图片?任何建议或答案将不胜感激 :D!

谢谢:)

最佳答案

我会为此使用 javascript 砌体布局:

http://masonry.desandro.com/

按照文档操作即可轻松安装。

关于html - 具有不同尺寸(分辨率)图片的容器全部组合在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21801829/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com