❶ css中如何調整插入背景圖片的大小
可以通過cover和contain來對圖片進行伸縮。
語法:
background-size:auto;/* 默認值,不改變背景圖片的高度和寬度 */
background-size:100px 50px;/* 第一個值為寬,第二個值為高,當設置一個值時,將其作為圖片寬度來等比縮放 */
background-size:10%;/* 0%~100%之間的任何值,將背景圖片寬高按百分比顯示,當設置一個值的時候同也將其作為圖片寬度來等比縮放 */
background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */
background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */
(1)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%;
}
❷ 怎麼用js改變div裡面的圖片大小
你的div的結構是下面這種結構嗎?
<div>
<img>
</div>
如果是的話,你先獲取到div,
然後在div里獲取img;
varaImg=document.getElementById("div'sId").getElementsByTagName('img');
for(vari=0;i<aImg.length;i++){
aImg[i].style.height="theheightyouwant";
aImg[i].style.width="thewidthyouwant";
}
如果你所說的圖片是指div的background,那麼你可以在CSS裡面用:
background-size:50px100px;(調整背景圖片的大小)
background-repeat:no-repeat;(是否平鋪,否)
/*也可以:*/
background-size:40%100%;(對背景圖片進行拉伸)
當然用js的話也可以:
img.style.backgroudSize='50px100px';
img.style.backgroudRepeat='on-repeat';
❸ 如何利用JS或者CSS樣式來自動調整圖片大小
js版和css版自動按比例調整圖片大小方法,分別如下:
<title>javascript圖片大小處理函數</title>
<scriptlanguage=Javascript>
varproMaxHeight=150;
varproMaxWidth=110;
functionproDownImage(ImgD){
varimage=newImage();
image.src=ImgD.src;
if(image.width>0&&image.height>0){
varrate=(proMaxWidth/image.width<proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate<=1){
ImgD.width=image.width*rate;
ImgD.height=image.height*rate;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
</script>
</head>
<body>
<imgsrc="999.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
<imgsrc="room.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
</body>
純css的防止圖片撐破頁面的代碼,圖片會自動按比例縮小:
<styletype="text/css">
.content-width{MARGIN:auto;WIDTH:600px;}
.content-widthimg{MAX-WIDTH:100%!important;HEIGHT:auto!important;width:expression(this.width>600?"600px":this.width)!important;}
</style>
<divclass="content-width">
<p><imgsrc="/down/js/images/12567247980.jpg"/></p>
<p><imgsrc="/down/js/images/12567247981.jpg"/></p>
</div>
❹ javascript控制背景圖片大小
如果你的圖片是用img插入的,那麼就在js中控制img標簽的寬高;
如果圖片是以背景插入的,那你應該用一個class來控制容器的樣式。
當然如果你容器是固定寬高的話,最好的辦法就是製作等大小的圖片。同時css中有個backgroud-size可以很好來縮放背景圖片。