在工作中,經(jīng)常會碰到圖片縮放的情況,比如服務(wù)器端返回的圖片大小,可能大小不同,有的大,有的小,服務(wù)器端返回的圖片大小我們不能控制的,但是在我們設(shè)計稿的時候,可能會規(guī)定每張圖片的大小為固定的寬度和高度,比如200px*200px這樣的。我們這邊使用的是背景圖片來做的,
但是如果直接使用 img標(biāo)簽這樣引入圖片貌似不行,因此我們目前只能使用背景圖片來做。對于大一點的圖片我們可以縮放的,但是對于很小
很小的圖片,我們把他們拉伸的話,可能會有點點模糊,但是一般的情況下是不會有這種情況,因為對于圖片的縮放,服務(wù)器端不太可能會返回
一張很小很小的圖片回來,一般都是比較大的。
1. 等比例縮放(1:1)
我們先來看看實現(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;
}
如上代碼就可以實現(xiàn)了。
以上就是“css3 實現(xiàn)圖片等比例放大與縮小”的詳細內(nèi)容,更多請關(guān)注木子天禾科技其它相關(guān)文章!