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

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

實(shí)現(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 { /*重點(diǎn)從這里開始*/

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%;

}

簡(jiǎn)要說明：

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

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

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

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

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

本文僅代表作者個(gè)人觀點(diǎn)，不代表SEO研究協(xié)會(huì)網(wǎng)官方發(fā)聲，對(duì)觀點(diǎn)有疑義請(qǐng)先聯(lián)系作者本人進(jìn)行修改，若內(nèi)容非法請(qǐng)聯(lián)系平臺(tái)管理員，郵箱cxb5918@163.com。更多相關(guān)資訊，請(qǐng)到SEO研究協(xié)會(huì)網(wǎng)bingfeng168.cn學(xué)習(xí)互聯(lián)網(wǎng)營(yíng)銷技術(shù)請(qǐng)到巨推學(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)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。