當前位置:首頁 » 背景圖片 » 背景圖片自適應js
擴展閱讀
修復圖片清晰度ps 2025-10-04 07:04:19
蘋果5s黑色手機圖片 2025-10-04 07:02:16
軟體登錄頁面圖片在哪裡 2025-10-04 06:30:32

背景圖片自適應js

發布時間: 2023-04-17 09:22:27

A. 關於用js改變td背景圖片

eval只有在IE下好使,Chrome和filefox里不太好使。

建議把eval全部換成document.getElementById,這樣幾個瀏覽器都兼容了。
比如:
whichEl = eval("submenu" + sid);可以換成whichEl = document.getElementById("submenu" + sid);

eval("submenu" + sid + ".style.display=\"\";");可以換成document.getElementById("submenu" + sid).style.display = "";

B. 求網頁背景圖片居中且自適應屏幕大小的方法,CSS或JS都可以

嘗試下這個...
<STYLE TYPE="text/css">
<!--
BODY {background-image: URL(photo/picture1.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;}
-->
</STYLE>

C. JS/CSS控制圖片大小自適應按鈕的大小

在做網站的時候,往往圖片的處理很重要,固定尺寸容易變形拉伸,不固定又會有不可預知的問題,有可能撐開頁面。使用js和css將圖片的現實控制在固定的蔽侍晌區域內,大於這個區域的等比例縮放,小於這個區域的居中顯示。
代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css+js完美控制圖片大小</title>
<談早script type="text/javascript" language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 400/400){
if(image.width>400){
ImgD.width=400;
ImgD.height=(image.height*400)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"x"+image.height;
}
else{
if(image.height>400){
ImgD.height=400;
ImgD.width=(image.width*400)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"x"+image.height;
}
}
}
//-->
</script>
<style type="text/css"宏鋒>
<!--
* {
margin:0;
padding:0;
}
li {
list-style:none;
}
img {
border:0;
}
.group_head {
width:400px;
height:400px;
line-height:400px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
float:left;
margin-right:10px;
}
.group_head p {
position:static;
+position:absolute;
top:50%;
vertical-align:middle
}
.group_head img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
-->
</style>
</head>

<body>
<ul class="jobGroup">
<li><a href="../group/index.php?group_id=10011"><div class="group_head"><p><img width="400" height="400" src=" http://www..com/img/_logo.gif" onload="DrawImage(this);"/></p></div></a>
</li>

</ul>
</body>
</html> PS.本文來自: http://www.code-123.com/html/2009814191245580.html

D. css中如何調整插入背景圖片的大小

可以通過cover和contain來對圖片進行伸縮。

語法:

background-size:auto;/* 默認值,不改變背景圖片的高度和寬度 */

background-size:100px 50px;/* 第一個值為寬,第二個值為高,當設置一個值時,將其作為圖片寬度來等比縮放 */

background-size:10%;/* 0%~100%之間的任何值,將背景圖片寬高按百分比顯示,當設置一個值的時候同也將其作為圖片寬度來等比縮放 */

background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */

background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */

(4)背景圖片自適應js擴展閱讀:

CSS背景圖片自適應、全屏、填充、拉伸

方法一:js控制

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="pictures/background.jpg" height="100%" width="100%"/>

</div>

<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>

<script type="text/javascript">

$(function(){

$('#formbackground').height($(window).height());

$('#formbackground').width($(window).width());

});

</script>

方法二:全瀏覽器兼容

.bg{

background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}

E. 使圖片自適應屏幕大小的js

對小屏幕的人來說,經純緩常有人發的圖片超過你的屏幕大小,頁面下面會出現一個橫向滾動條,瀏覽起來很不方便,有的做源模網站因為排版問題,導致一行文字過長,拉伸了整個頁面,都可以通過這個腳本來「修正」,讓該頁面更適合你的屏幕裂陸大小。

gBrowser.loadURI("javascript:(function(){function%20t(f){a=d.createNodeIterator(d,1,f,false);while(a.nextNode()){}}var%20d=document;t(function(e){x=e.offsetLeft;l=e.offsetParent;while(l!=null){x+=l.offsetLeft;l=l.offsetParent}var%20w=d.documentElement.clientWidth-x;var%20s=e.style;if(s.marginLeft)w-=s.marginLeft;if(s.marginRight)w-=s.marginRight;if(s.paddingLeft)w-=s.paddingLeft;if(s.paddingRight)w-=s.paddingRight;if(s.borderSize)w-=s.borderSize;w-=d.defaultView.innerWidth-d.documentElement.offsetWidth;if(e.tagName=='IMG'){h=e.clientHeight*w/e.clientWidth;s.maxHeight=h}s.maxWidth=w+'px'})})();");

F. 如何設置網頁背景圖片自適應屏幕寬度

給網頁插入背景圖片,並且是圖片合適網頁大小
<style type="text/css">
body{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="簡歷背景.jpg",sizingMethod="scale")
}
</style>

G. 我想在body里放一個背景圖片,瀏覽的時候填充整個屏幕,請問這樣的JS代碼或CSS代碼怎麼寫

這個是用css設置背景圖片

url :"../images"表示當前目錄的上級目錄下的目錄

no-repeat:背景圖片無重復。

background-size:背景圖片大小,兩個百分百表示長寬都占屏幕百分百,防止網頁縮放或者屏幕大小不一樣時沒有鋪滿

H. 在JS中怎樣讓DIV的背景圖片自動適應

這個問題應該是CSS來解決吧。

I. 請問DIV 或者JS 怎麼寫可以讓圖片自適應全屏幕,哪怕1920顯示器 也適應,不要背景。

圖片寬度寫成100%就行了啊。
另外,背景圖片默認是隨滾動條移動的,你是不是定義了背景圖固定?

J. emlog要讓背景圖自適應屏幕應該怎麼弄不使用插件

圖片分為背景圖片和通過img標簽引入的圖片,前者可以通過media query自動的切換不同解析度的版本,但是在不支持background image size的瀏覽器中背景圖片無法無級的調整大小(也就是在media query切換css的點上可以換一張不同解析度的圖,但是沒法兒獲得兩張解析度中間大小的版本),而且在很多情況下(比如cms中)並不適合用背景圖片。
如果是img標簽引入的圖片,可以使用延遲載入的方式來載入,在實際載入圖片之前先用js檢查窗口寬度,然後載入不同解析度的圖片,比如寬度<=480,就載入80px寬度的圖片,480 < 寬度 <= 768,載入120px的圖片, 寬度> 768則載入160px的圖片,如果寬度是600px怎麼辦呢,通過百分比來縮放120px的圖片達到合適的結果。
這樣做的好處是對於移動設備來說,下載的圖片會小一些,減少網頁載入的時間。但是問題是豎屏向橫屏切換或者擴大瀏覽器窗口寬度時圖片會由於放大而枝液產生一定的模糊感。
響應式設計中對於圖片的考慮應該從布局設計就開始,盡量使圖片在各個窗口寬度下的尺寸不要相差過大,通過排布更多虛並的內容而不是擴大圖片的尺寸來填充由於瀏覽器窗口擴大帶來猛譽物的空間。這樣可以有效的減少圖片放大模糊的問題。