jquery - 在div背景中设置html图片

Question

我需要设置 div 的背景并使用下面的代码...

下面正确设置了背景，但我希望以缩小版本显示完整图像，以便用户可以看到完整图像...我该如何解决？

html

<div id="product1left" class="product-cards-left" 
style="background-image:url('http://i57.tinypic.com/2d0mnar.jpg')"

> </div>

CSS

#product1left{
    width:100px;
    height:100px;
    background-color:red;
}

Here's my fiddle

Answer 1

您可以像下面这样使用 background-size CSS 属性:

#product1left{
    width:100px;
    height:100px;
    background-color:red;
    background-size:100%; /* does the trick */
}

示例: FIDDLE

虽然您应该避免为较小的缩略图使用高分辨率图像。更好的方法是生成原始图像的小版本，然后将其用于缩略图。