設置HTML圖片在div背景

我需要設置div的背景，並使用下面的代碼...設置HTML圖片在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

來源

2014-07-14 user1050619

可以使用[background-size]（https://developer.mozilla.org/en-US/docs/Web/CSS/background-size）屬性指定背景圖像的大小，例如， 'background-size：100px 100px;'。但是，既然你想顯示一個縮略圖然後與它進行交互，你爲什麼不用一個img標籤呢？ – StathisG

可以使用background-size CSS屬性像波紋管：

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

舉例：FIDDLE

儘管您應該避免使用高分辨率圖像縮小縮略圖。更好的方法是生成原始圖像的小版本，然後將其用於縮略圖。

來源

2014-07-14 17:52:03

非常感謝..是否有一個工具可以用來生成原始圖像的小版本？ – user1050619

您可以使用某種圖像編輯器（Paint，Photoshop，Gimp，...）或手動使用服務器端語言來手動執行此操作。 –

設置HTML圖片在div背景

回答

相關問題