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

Question

嗨，我在将图片整齐地放置到我的网站时遇到问题。

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

在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');
            }
        );
    });

这可以正常工作，并按我希望的方式在div中显示产品图像。 问题在于某些图像的高度和宽度不同，并且它们现在呈现的方式显得笨拙和丑陋。 如何在具有相同高度和宽度或至少相同高度的整齐的集合中显示它们？

我尝试将其放在div标签和span标签中，但它完全弄乱了我已有的东西。 我对前端技术不太满意，因此不胜感激！ 甚至图书馆也会帮助我...

提前致谢

Answer 1

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

Answer 2

尝试使用带有img标签的CSS

img
{

    height: 150px; //your height
}

这将设置图像的高度并按比例缩放图像宽度。

如果要应用于某些特定图像，请在CSS中将其定义为。 对于div中的所有图像都喜欢img-div

.img-div img
{
}

Answer 3

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

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

要回答您的问题，如果您不介意剪辑，您还可以使用帧 div来保持比率，这很棘手

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

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