在工作中，經(jīng)常會(huì)碰到圖片縮放的情況，比如服務(wù)器端返回的圖片大小，可能大小不同，有的大，有的小，服務(wù)器端返回的圖片大小我們不能控制的，但是在我們?cè)O(shè)計(jì)稿的時(shí)候，可能會(huì)規(guī)定每張圖片的大小為固定的寬度和高度，比如200px*200px這樣的。我們這邊使用的是背景圖片來(lái)做的，
但是如果直接使用 img標(biāo)簽這樣引入圖片貌似不行，因此我們目前只能使用背景圖片來(lái)做。對(duì)于大一點(diǎn)的圖片我們可以縮放的，但是對(duì)于很小
很小的圖片，我們把他們拉伸的話(huà)，可能會(huì)有點(diǎn)點(diǎn)模糊，但是一般的情況下是不會(huì)有這種情況，因?yàn)閷?duì)于圖片的縮放，服務(wù)器端不太可能會(huì)返回
一張很小很小的圖片回來(lái)，一般都是比較大的。

1. 等比例縮放(1:1)
我們先來(lái)看看實(shí)現(xiàn)圖片等比例縮放的情況下：
html代碼如下：

css代碼如下：

.demo1-1 {

  float: left;

  width: 200px;

  height: 200px;

  overflow: hidden;

}

.zoomImage {

  width: 100%;

  height: 0;

  padding-top: 100%;

  overflow: hidden;

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  -webkit-background-size: cover;

  -moz-background-size: cover;

}

如上代碼就可以實(shí)現(xiàn)了。

以上就是“css3 實(shí)現(xiàn)圖片等比例放大與縮小”的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注木子天禾科技其它相關(guān)文章！