jquery显示具有相同高度和宽度的图像

Hi I am having an problem placing images in a neat manner in my site.

嗨，我在我的网站中以整洁的方式放置图像时遇到问题。

So what I have is: Using ajax I get a bunch of image URLS as JSON.

所以我拥有的是：使用ajax我得到一堆图像URL作为JSON。

in Jquery I am looping these and printing them into a div like this:

在Jquery我循环这些并将它们打印成这样的div：

$('.product').click(function(){
        $.post( 
            "ajax.php",
            { 
                prodId: productId,
                action: "getProductImages" 
            },
            function(data) 
            {
                var obj = jQuery.parseJSON(data);
                newDiv = "";
                jQuery.each(obj, function(key,value) 
                {
                    newDiv += '<img src="'+value+'">';
                });
                $("#prod-images").empty();
                $(newDiv).appendTo('#prod-images');
            }
        );
    });

This works fine and shows the product images in a div as I want it to show. The problem is that some images have different height and width and they look awkward and ugly the way they are rendered now. How can I show them in a neat set with same height and width, or atleast same height?

这工作正常，并在div中显示产品图像，因为我希望它显示。问题是一些图像具有不同的高度和宽度，并且它们现在呈现的方式看起来很尴尬和丑陋。如何在高度和宽度相同或高度相同的整齐套装中展示它们？

I tried putting it in div tag and span tag, but it totally messes up what I already have. I am not very good with frontend technology so any help is appreciated! Even a library will help me...

我尝试将它放在div标签和span标签中，但它完全弄乱了我已经拥有的东西。我对前端技术不是很好，所以任何帮助都表示赞赏！即使是图书馆也会帮助我......

Thanks in advance

提前致谢

3 个解决方案

#1

You can put the height and width attributes in the img element.

您可以将height和width属性放在img元素中。

#2

Try css with img tag

尝试使用img标签的css

img
{

    height: 150px; //your height
}

This will set the height of the image and scale the image width keeping the ratio.

这将设置图像的高度并缩放保持比率的图像宽度。

If you want to apply to some specific image then define that in css to . like for all image in div which class is img-div

如果要应用于某些特定图像，请在css中定义该图像。喜欢div中的所有图像，哪个类是img-div

.img-div img
{
}

#3

You could attach a CSS class in your img tag.

您可以在img标记中附加CSS类。

.media-small {
    width: auto
    height: 300px; /* or em */
}

To answer your question you could also get tricky with a frame div to maintain the ratio if you don't mind the clipping

要回答你的问题，如果你不介意剪裁，你也可能会使用帧div来保持比例

div.media-frame {
    width: 300px;
    height: 300px;
}

img.media {
    overflow: hidden
    width: 300px
    height: auto /* you may need to play with your defaults */
}

#1