本方法適用圖片尺寸不一，且需要根據(jù)頁面大小實現(xiàn)自適應(yīng)等比縮放的情況；

之前一直用的是背景圖的方式來實現(xiàn)這個效果，可以這樣做的一個弊端是不利于SEO 的優(yōu)化，所以決定換種方式寫，綜合網(wǎng)上搜出來的文章，寫了這個教程，供新手學(xué)習(xí)使用。

實現(xiàn)樣式：

先上代碼：

HTML結(jié)構(gòu)

<div class="wide">

<div class="img-wrap">

<div>

<img src="./test_img.jpg" />

</div>

</div>

<p class="goods-name">商品名稱</p>

</div>

CSS樣式

.wide {

width: 60%;

height: auto;

margin: 0 auto;

border: 1px solid #f2f2f2;

}

.wide .goods-name {

width: 100%;

height: 28px;

font-size: 14px;

padding: 0 10px;

box-sizing: border-box;

background-color: #fff;

}

.img-wrap { /*重點從這里開始*/

width: 100%;

height: 0;

padding-bottom: 60%;

overflow: hidden;

position: relative;

background-color: lightgray;

}

.img-wrap > div {

width: 100%;

height: 100%;

position: absolute;

display: flex;

align-items: center;

justify-content: center;

}

.img-wrap > div img {

width: auto;

height: auto;

max-width: 100%;

max-height: 100%;

}

簡要說明：

1、.img-wrap 的 padding百分比值是相對于寬度的，這樣我們就可以按照圖片的比例來設(shè)置高度啦！height=0,padding-bottom=100% 正好是一個正方形（這里設(shè)置為60%）；設(shè)置相對定位是為了 能夠使子元素 基于它設(shè)置寬高（這樣padding的值會計算在內(nèi)，不然子元素的高度設(shè)置百分比時只會是我們寫的‘height: 0’）;

2、圖片寬高 { width: auto; height: auto; max-width: 100%; max-height: 100%; } 這樣圖片可以自適應(yīng)按父元素寬高等比例顯示；

3、至此圖片自適應(yīng)就寫好了，下面就是居中；

4、居中的方法很多；我這里用了flex布局，很容易就可以實現(xiàn)，如果要兼容IE和多版本瀏覽器請用其它居中方法實現(xiàn)；

補充：在設(shè)置圖片時，可以把寬、高都設(shè)置成100%，然后使用CSS比較新的屬性 object-fit 來實現(xiàn)圖片按比例自適應(yīng)居中顯示。

本文僅代表作者個人觀點，不代表SEO研究協(xié)會網(wǎng)官方發(fā)聲，對觀點有疑義請先聯(lián)系作者本人進行修改，若內(nèi)容非法請聯(lián)系平臺管理員，郵箱cxb5918@163.com。更多相關(guān)資訊，請到SEO研究協(xié)會網(wǎng)m.bingfeng168.cn學(xué)習(xí)互聯(lián)網(wǎng)營銷技術(shù)請到巨推學(xué)院www.jutuiedu.com。

標(biāo)簽： isp seo 代碼 互聯(lián)網(wǎng) 學(xué)習(xí)互聯(lián)網(wǎng)

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。