App下載

css圖片怎么自適應(yīng)?圖片自適有哪些方法?

猿友 2021-06-11 10:46:09 瀏覽數(shù) (5711)
反饋

在一個(gè)布局設(shè)置中如何能夠讓圖片實(shí)現(xiàn)自適應(yīng)顯示?我們就來(lái)說(shuō)說(shuō)在“css中的圖片怎么自適應(yīng)?圖片自適有哪些方法?”這個(gè)問(wèn)題吧!


1.首先我們創(chuàng)建一個(gè) .html文件在里面放入我們的一個(gè)圖片,代碼如下;

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>title</title>

<link rel="stylesheet" href="css/ZSY_test.css" />

</head>

<body>

<div class="wrapper">

<!--背景圖片-->

<div id="web_bg"

style="background-image: url(bootstrap-5.0.1/site/content/docs/5.0/examples/features/unsplash-photo-2.jpg)">

</div>

<!--其他代碼 ... -->

</div>

</body>

</html>


2.創(chuàng)建 .css文件,我們通過(guò)在css文件中設(shè)置樣式使得我們可以得到想要的自適應(yīng)效果代碼如下:

#web_bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 1000px;
	z-index: -10;
	zoom: 1;
	background-color: #fff;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-position: center 0;
}

我們通過(guò)這些代碼中就可以實(shí)現(xiàn)自適應(yīng)的圖片,而且在css文件的代碼中,?position: fixed; top: 0; left: 0;?這個(gè)樣式是為了讓我們的盒子就是 div 固定在屏幕的最上方和最左方。那么固定完成之后我們通過(guò)?width: 100%; height: 100%; min-width: 1000px;??background-repeat: no-repeat;?這串代碼使得我們的圖片可以實(shí)現(xiàn)和屏幕一樣大小不會(huì)因?yàn)橥蟿?dòng)或者縮小從而不能實(shí)現(xiàn)我們的一個(gè)平鋪的效果;而?min-width是為了實(shí)現(xiàn)讓屏幕寬度在1000px以內(nèi)時(shí),div的大小保持不變,也就是說(shuō)在這種情況下,縮放屏幕寬度時(shí),圖片不要縮放(只有在1000px以內(nèi)才有效)。


總結(jié):

以上就是一個(gè)有關(guān)于“css圖片怎么自適應(yīng)?圖片自適有哪些方法?”這個(gè)問(wèn)題小編分享的案例和代碼希望對(duì)你有所幫助,更多有關(guān)于學(xué)習(xí)css的內(nèi)容我們都可以在w3cschool中進(jìn)行學(xué)習(xí)和了解。


0 人點(diǎn)贊