css怎么使圖片縮小

發(fā)布時間：2021-11-25 16:47:17 來源：億速云閱讀：307 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“css怎么使圖片縮小”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

方法：1、利用width和height屬性使圖片縮小，語法“圖片對象{width:寬度;height:高度;}”；2、利用“background-size”屬性使圖片縮小，語法“圖片對象{background-size:寬度高度;}”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css如何使圖片縮小

1、在css中，我們可以通過width和height屬性設(shè)置圖片的高和寬來設(shè)置圖片大小，來達(dá)到圖片縮小的目的。

下面我們通過示例來看一下，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .img{
                width: 200px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <p><strong>原始圖片大小</strong></p> 
        <div><img src="1118.02.png"><br> 
    </div> 
        <br />
        <p><strong>通過CSS使圖片縮小</strong></p> 
        <div>
            <img src="1118.02.png" class="img"><br> 
        </div>
        
    </body>
</html>

輸出結(jié)果：

css怎么使圖片縮小

2、在css中可以利用background-size屬性來實現(xiàn)圖片縮小，下面我們通過示例來看一下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            div{
                width: 400px;
                height: 320px;
            }
            .box1{
                background:url(1118.02.png) no-repeat;
            }
            .box2{
                background:url(1118.02.png) no-repeat;
                background-size: 200px 160px;
                
            }
        </style>
    </head>
    <body>
        <p><strong>原始圖片大小</strong></p> 
        <div class="box1"></div> 
        <br />
        <p><strong>通過CSS縮小背景圖片</strong></p> 
        <div class="box2"></div>
    </body>
</html>

輸出結(jié)果：

css怎么使圖片縮小

“css怎么使圖片縮小”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

向AI問一下細(xì)節(jié)

css怎么使圖片縮小

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽