我有一堆图像想用 jquery 显示。我有 div,我使用 jquery 根据一些 node_id 标准填充 div。例如,如果 node_id 是 teamA,我会显示图像名称中包含 teamA 文本的图像。
找到了,问题是当把图片放在html的主体上时,图片会垂直显示,直到主页上没有空间。
我想根据浏览器窗口的大小执行此操作,根据浏览器窗口的大小显示图像。例如,如果图像大小为 500x500,浏览器窗口宽度为 700,我应该可以每行显示一张图像。如果浏览器的宽度是 1200,那么在我的浏览器窗口中每行应该有 2 个图像。
为了给你一个想法,我放了 html 和 jquery 代码来向你展示我在做什么:
<div class="tab-content" id="tabs1">
<div id="team_A" class="team"></div>
<div id="team_B" class="team"></div>
<div id="team_C" class="team"></div>
<div id="team_D" class="team"></div>
</div>
这是根据jstree node_id显示图片的jquery代码:
var team_A_Img = "http://test.net" + node_id + "-team_A.png";
$(function () {
var myImage = new Image();
$(myImage).load(function () {
$("#team_A").html(myImage);
}).error(function () {
$('#team_A').hide();
}).attr('src', Img_A_Img)
});
这行得通,但我需要根据浏览器上的空间大小,根据浏览器窗口的垂直或水平大小显示图像。有人可以给我一些想法吗?
最佳答案
如果可以指定图像的宽度,则可以将它们 float 在 block 级元素中。 例如:
<div class="tab-content" id="tabs1">
<div id="team_A" class="team"><img src="http://placehold.it/350x150"></div>
<div id="team_B" class="team"><img src="http://placehold.it/350x150"></div>
<div id="team_C" class="team"><img src="http://placehold.it/350x150"></div>
<div id="team_D" class="team"><img src="http://placehold.it/350x150"></div>
</div>
并使用以下 CSS:
.tab-content {
padding: 0px;
background-color: yellow;
overflow: auto;
}
.team {
float: left;
margin: 0 5px 5px 0;
}
.team img {
display: block;
}
要实现此功能,请在父容器中设置 overflow: auto
,尤其是当您想要使用背景颜色或图像时。
您可以调整 float 元素的边距或填充以在图像之间创建和设置间距。
最后,我在图像上使用 display: block
来处理内联元素可能产生的任何空白。
关于jquery - 根据浏览器宽度显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15391116/