|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 在我們?yōu)g覽頁面時或者實際工作中,偶爾會遇到圖片縮放的問題。那么本篇文章就給大家介紹關(guān)于css 圖片等比例縮放即css圖片等比例顯示的問題。希望對有需要的朋友有所幫助。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>效果如下圖:
注:background-size 屬性規(guī)定背景圖像的尺寸。 可能值: 1、length 設(shè)置背景圖像的高度和寬度。第一個值設(shè)置寬度,第二個值設(shè)置高度。如果只設(shè)置一個值,則第二個值會被設(shè)置為 "auto"。 2、percentage 以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個值設(shè)置寬度,第二個值設(shè)置高度。如果只設(shè)置一個值,則第二個值會被設(shè)置為 "auto"。 3、cover 把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。 4、contain 把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。 以上就是關(guān)于css圖片等比縮放顯示的具體介紹內(nèi)容,具有一定的參考價值,可供大家借鑒。 以上就是css怎么實現(xiàn)圖片在頁面上以相同等比例顯示縮放?(示例)的詳細內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!