日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

這篇文章將為大家詳細(xì)講解有關(guān)CSS如何解決前端圖片變形的問(wèn)題，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)專(zhuān)注于企業(yè)成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)、網(wǎng)站重做改版、武川網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、商城開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為武川等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

一、讓圖片的寬度或者高度等于容器的寬度或高度，多余的裁掉，然后讓圖片居中：

div{
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 2px solid red;
    position: relative;
}
img{
    width: 100%;
    position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%); 
}


    




    

效果圖：

如果圖片的寬度限制了，高度大于等于容器的高度，就會(huì)填滿(mǎn)整個(gè)容器，但是如果圖片高度小于容器高度，就會(huì)出現(xiàn)空白，固定高度同理。此方法是最簡(jiǎn)單也最實(shí)用，配合后臺(tái)裁切，更加完美。

二、讓圖片始終顯示在容器內(nèi)，并且居中顯示。這種方法不會(huì)裁切圖片，可以說(shuō)是上面的升級(jí)版。

div{
    width: 200px;
    height: 200px;
    border: 2px solid red;
    position: relative;
}
img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%); 
}


    




    

效果圖如下：

 可以看到，無(wú)論是寬度超過(guò)容器，還是高度超過(guò)容器，還是寬高都不超過(guò)容器，都能全部居中顯示在容器內(nèi)，不會(huì)裁切。

三、將圖片變成背景，通過(guò)改變背景尺寸等可以任意改變圖片在容器中顯示的效果，操作是最方便的：

div{
    width: 200px;
    height: 200px;
    border: 2px solid red;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}