CSS圖片剪裁與原比例壓縮或放大
阿新 • • 發佈:2018-11-13
在前端網頁製作的過程中,圖片的處理往往比較頭疼,當然不考慮你有很給力的美工後援的情況下。以下將對一些常見的CSS圖片處理需求情況進行分析:
1、一張圖片要放在固定寬高的內容塊中,並填充滿整個內容塊(看起來整齊劃一)
我們假設要把一張大小為1920*1200的圖片放在400*400的內容塊中,由於這時圖片是長大於寬的,為了保證圖片看起來不被壓縮,可以固定寬度,從圖片中間向左右兩側裁剪以保留圖片的核心內容。如下圖所示(左圖為原圖,右圖則為實際顯示在400*400內容內的圖片內容)
HTML程式碼:
-
<div
class="cover">
-
<img src="img/cover.jpg"/>
-
</div>
CSS程式碼:
-
img
-
{
-
height:
100%;
-
width: auto;
-
left:
50%;
-
position: relative;
-
-webkit-transform
:
translateX(-50%);
-
-ms-transform:
translateX(-50%);
-
-moz-transform:
translateX(-50%);
-
}
-
.cover
-
{
-
margin:
100px auto;
-
width:
400px;
-
height:
400px;
-
overflow: hidden;
-
border:
1px solid cornflowerblue;
-
position: relative;
-
}
若原始圖片大小為683*984,即長小於寬,為了保證圖片看起來不被壓縮,可以固定長度,從圖片中間向上下兩端裁剪以保留圖片的核心內容。如下圖所示(左圖為原圖,右圖則為實際顯示在400*400內容內的圖片內容)
CSS程式碼:
-
img
-
{
-
width:
100%;
-
height: auto;
-
top:
50%;
-
-webkit-transform:
translateY(-50%);
-
-ms-transform:
translateY(-50%);
-
-moz-transform:
translateY(-50%);
-
position: relative;
-
}
CSS程式碼:
-
.jumbotron
-
{
-
padding:
0;
-
background-image:
url(../img/cover.jpg);
-
background-position: center center;
-
}
重點是將圖片設定為背景圖片。
PS:以後遇到更多的CSS圖片處理問題還會繼續更新~小夥伴們敬請期待 :)