当前位置:首页 » 背景图片 » js怎么把背景图片扩大
扩展阅读
手机好多图片 2025-02-02 09:48:56
日本哪个牙膏最好图片 2025-02-02 09:46:41

js怎么把背景图片扩大

发布时间: 2023-08-05 22:31:53

❶ 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可以很好来缩放背景图片。