css如何實(shí)現(xiàn)圖片在頁(yè)面上以相同等比例顯示縮放

發(fā)布時(shí)間：2020-09-24 10:14:12 來(lái)源：億速云閱讀：285 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css如何實(shí)現(xiàn)圖片在頁(yè)面上以相同等比例顯示縮放，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

css圖片等比例顯示具體代碼示例如下：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css圖片等比例顯示代碼示例</title>
    <meta charset="UTF-8">
    <style type="text/css">
        .demo1-1 {
            float: left;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        .zoomImage {
            width: 100%;
            height: 0;
            padding-top: 100%;
            overflow: hidden;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
        }
    </style>
</head>
<body>
<div class="demo1-1">
    <div class="zoomImage" style="background-image: url(2.png)"></div>
</div>
</body>
</html>

效果如下圖：

css如何實(shí)現(xiàn)圖片在頁(yè)面上以相同等比例顯示縮放

注：background-size 屬性規(guī)定背景圖像的尺寸。

可能值：

1、length

設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"。

2、percentage

以父元素的百分比來(lái)設(shè)置背景圖像的寬度和高度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"。

3、cover

把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中。

4、contain

把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。

關(guān)于css如何實(shí)現(xiàn)圖片在頁(yè)面上以相同等比例顯示縮放就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

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

css如何實(shí)現(xiàn)圖片在頁(yè)面上以相同等比例顯示縮放

猜你喜歡

最新資訊

相關(guān)推薦

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