基于浏览器宽度显示图像 [英] display images based on browser width

问题描述

我有一堆图像，我想使用jquery显示。我有divs，我使用jquery填充divs基于一些node_id标准。例如，如果node_id是teamA，则我在图像名称中显示具有teamA文本的图像。

I have bunch of images that I would like to display using jquery. I have divs and I used jquery to populate the divs based on some node_id criteria. For example, if the node_id is teamA, I display images that has teamA text in the name of the images.

它可以找到，问题是，在html的主体上，图像垂直显示，直到主页上没有空格。

It works find, the problem is that when Put the images on the body of the html, images are displayed vertically until there is no space on the main page.

我想根据浏览器的大小窗口，根据浏览器窗口的大小显示图像。例如，如果图片大小为500x500，浏览器窗口宽度为700，我应该能够每行显示一个图片。如果浏览器的宽度是1200，我的浏览器窗口中应该每行有2个图片。

What I would like to do this depending on the size of the browser window, display the images depending on the size of the browser window. For example, if the image size is 500x500 and the browser window width is 700, I should be able to display one image per line. If the width of the browser is 1200, there should be 2 images per line in my browser window.

为了给你一个想法，我把html和jquery代码以显示我的操作：

To give you an idea, I've put html and jquery code to show you what I am doing:

<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代码：

This is the jquery code to display the image based on jstree node_id:

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)

            });

这个工具，但我需要显示基于浏览器窗口大小的图像垂直或水平，基于关于我在浏览器上有多少空间。

This workds but I need to show the images based on the browser window size either vertically or horizonally, based on how much space I have on the browser. Can somebody give me ideas how I would do this?

推荐答案

如果你可以指定图像的宽度，你可以将它们浮动在块级元素中。
例如：

If you can specify the width of the images, you can float them in a block-level element. For example:

<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 在父容器中，特别是如果你想使用背景颜色或图像。

To make this work, set overflow: auto in the parent container especially if you want to use a background color or image.

您可以调整浮动元素的边距或填充

You can adjust the margin or padding of the floated element to create and style gutters between images.

最后，我使用 display：block 在图像上处理任何空格

Finally, I use display: block on the images to deal with any white space that may result from an inline element.

有关参考，请参阅： http://jsfiddle.net/audetwebdesign/8FEeM/

这篇关于基于浏览器宽度显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！