如何用CSS縮小圖像？

我有this page，我有用戶上傳圖片圖像的行業，他們正在上傳更大的圖像。我想通過CSS調整它的大小，並在Firebug中更改它時將它剪切。要查看我的意思，請從頂部下拉列表中選擇「零售」，然後從「選擇業務類型」中選擇「常規」，您將看到異常形狀的圖像。它需要是56 像素* 52 像素。如何用CSS縮小圖像？

這裏是我的HTML：

<span class="icon select-business-icon" style="background-image: url(http://posnation.com/shop_possystems/image/data/icons/retail.png);">&nbsp;</span>

我試圖在CSS設置寬度和高度所需的測量，但它所作的只是截斷的形象，而不是調整。

來源

2011-05-11 Trace

CSS 3引入了background-size property，但支持不是通用的。

讓瀏覽器調整圖像大小效率不高，但仍需下載大圖像。你應該調整它的服務器端（緩存結果），並使用它。它將使用更少的帶寬並在更多瀏覽器中工作。

來源

2011-05-11 18:51:12 Quentin

您可以調整使用CSS就好了，如果你修改圖片標籤圖片：

<img src="example.png" style="width:2em; height:3em;" />

不能使用擴展CSS2一個background-image屬性，雖然你可以嘗試CSS3屬性background-size。

另一方面，你可以做的是在一個範圍內嵌套一個圖像。看到這個問題的答案：Stretch and scale CSS background

來源

2011-05-11 18:53:38 erjiang

這裏是我做了什麼：

.resize { 
    width: 400px; 
    height: auto; 
} 

.resize { 
    width: 300px; 
    height: auto; 
} 

<img class="resize" src="example.jpg"/>

這將保持圖像的長寬比不變。

來源

2011-05-11 19:23:54

這只是現在的工作對我好！ – somdow 2012-05-01 16:49:22

這是一張圖片，而不是背景圖片。 – Dementic 2013-03-12 08:12:19

我們通過擁有兩個相同的類來實現什麼？第二個不會覆蓋第一個？ – gsamaras 2015-09-19 00:17:15

你可以試試這個：

-ms-transform: scale(width,height); /* IE 9 */ 
-webkit-transform: scale(width,height); /* Safari */ 
transform: scale(width, height);

例如：圖像「生長」的1.3倍

-ms-transform: scale(1.3,1.3); /* IE 9 */ 
-webkit-transform: scale(1.3,1.3); /* Safari */ 
transform: scale(1.3,1.3);

來源

2016-04-11 08:20:32

如何用CSS縮小圖像？

回答

相關問題