利用CSS樣式屬性控制讓背景圖片和IMG圖片正常顯示不變形

來源:鄭州建網站  發布時間:2020-05-15  188 次瀏覽

建企業網站時在前端頁面設計中,會遇到類似這樣的問題:有一個不是正方形的圖片,可能是寬度大于高度的,也可能是高度大于寬度的,而你又并不想用背景圖的方式來做,要實現用img標簽來讓此圖片顯示出一個正方形的且不變形的效果。即如下圖:只顯示圖片中間部分(紅框部分)我們本次討論中用到的兩張圖片的原圖就是上面的兩張圖片(一張寬度大于高度,另一張高度大于寬度)

讓背景圖片正方形顯示

第一種情況:讓背景圖片顯示正方形的效果而不變形
首先還是從背景圖的做法說起,遇到類似的問題,我們大部分人首先想到的是,能用背景圖片做的話,就直接用背景圖片來做了,至少我是這么想的。那么用背景圖的方式是怎么做的,代碼還是寫一下如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>背景圖的做法</title>
    <style>
        .bg1 {
            width: 200px;
            height: 200px;
            background: url("images/pic1.jpg") center;
            background-size: contain;
        }
        .bg2 {
            width: 200px;
            height: 200px;
            background: url("images/pic2.jpg") center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h3>背景圖的做法</h3>
    <div class="bg1"></div> <div class="bg2"></div>
</body>
</html>

最終的顯示效果如下:

background-size背景圖正文形顯示

此種方法要用到background-size這個屬性,background-size 屬性規定背景圖像的尺寸。
background-size: cover;
把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
background-size: contain;
把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。

第二情況:img標簽顯示圖片的正方形效果
首先、也是需要設置img標簽的寬度和高度是一致的,另外需要用到一個關鍵的css屬性: object-fit:cover; 下面還是直接貼出代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>img標簽的做法</title>
    <style>
        .img1 {
            width: 200px;
            height: 200px;
            object-fit: cover;
        }
        .img2 {
            width: 200px;
            height: 200px;
            object-fit: cover;
        }
    </style>
</head>
<body>
<h3>img標簽的做法</h3>
<img src="images/pic1.jpg" class="img1"><img src="images/pic2.jpg" class="img2">
</body>
</html>

最終的顯示效果如下圖:

background-size背景圖正文形顯示

object-fit是起作用的關鍵屬性,那么其它值都代表什么意思呢:
那么object-fit屬性還有哪些值呢?
  object-fit: fill;
  object-fit: contain;
  object-fit: cover;
  object-fit: none;
  object-fit: scale-down;

fill: 中文釋義“填充”。默認值。替換內容拉伸填滿整個contentbox,不保證保持原有的比例。
contain: 中文釋義“包含”。保持原有尺寸比例。保證替換內容尺寸一定可以在容器里面放得下。因此,此參數可能會在容器內留下空白。
cover: 中文釋義“覆蓋”。保持原有尺寸比例。保證替換內容尺寸一定大于容器尺寸,寬度和高度至少有一個和容器一致。因此,此參數可能會讓替換內容(如圖片)部分區域不可見(上面講解的例子就是如此)。
none: 中文釋義“無”。保持原有尺寸比例。同時保持替換內容原始尺寸大小。
scale-down: 中文釋義“降低”。就好像依次設置了none或contain, 最終呈現的是尺寸比較小的那個。

下面我們來測試一下每一個屬性值顯示的效果,為了更明顯的看出區別,我們換另外一張圖片。
每個img標簽都設置的 width:200px 和 width:200px,再加上設置的object-fit屬性的不同值,效果圖如下:

object-fit屬性設置

object-position屬性
object-position要比object-fit單純的多,就是控制圖片在盒子中顯示位置的。默認值是50% 50%,也就是居中效果,所以,無論上一節object-fit值為那般,圖片都是水平垂直居中的。因此,下次要實現尺寸大小不固定圖片的垂直居中效果,可以試試object-fit屬性。


上一篇: 在建網站時CSS樣式表的常見使用方法

下一篇: 網頁如何屏蔽常用功能快捷鍵?

最新信息
推薦信息
  1. 網頁如何屏蔽常用功能快捷鍵?
  2. 鄭州哪里有便宜的網站存放空間或虛擬主機?
  3. 自己能搭建個人網站嗎,網站建設難不難?
  4. 鄭州SEO優化公司排名首頁案例:鄭州建網站
建企業網站
建企業網站


大满贯麻将游戏单机版 宁夏11选五走势图 河北快3走势开奖结果 怎样才能炒股赚钱 甘肃十一选五开奖情况 中特十二码资料大全 河北11选5走势图 股票指数怎么看涨跌 广东快乐十分中奖金额对照表 怎么看福利彩票双色球 青海11选五今天开奖