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 */
}

要回答您的问题，如果您不介意剪辑，您还可能会使用 frame div来保持比例

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

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

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

3 个答案: