div+css怎么让背景图片自动缩放

如题所述

.imgDiv{

width:500px;

height:500px;

background-image:url('../images/index.jpg');

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

-o-background-size: 100% 100%;  

-webkit-background-size: 100% 100%;  

background-size: 100% 100%;  

-moz-border-image: url(./btn.png) 0;  

background-repeat:no-repeat\9;  

background-image:none\9;

(此处空一行)

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/index.jpg', sizingMethod='scale')\9;

}   

扩展资料:

css控制背景图片自动伸缩自适应的小技巧

例子如下:

.picLUp{    

background:url(logo.png) no-repeat;    

width:100%;height:40%;    

background-size:100% 100%;    

}    

语法:

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

属性:

enabled: 

可选项,布尔值(Boolean),设置或检索滤镜是否激活。true | false

true: 

默认值,滤镜激活。

false: 

滤镜被禁止。

sizingMethod: 

可选项,字符串(String),设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

温馨提示:内容为网友见解,仅供参考
第1个回答  推荐于2019-11-05

代码如下:

body {

background: url("./../img/bg.jpg") fixed center center no-repeat;

background-size: cover;

width: 100%;

}

DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。提起DIV+CSS组合,还要从XHTML说起。XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求。

“DIV+CSS”其实是错误的叫法,而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记,而CSS只是一种表现形式。也许其提出者本意并没有错,但是跟风者从表现曲解了其意思,认为整个页面就应当是DIV+CSS文件的组合。

方法

css是层叠样式表(Cascading Style Sheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。

在HTML文档中加入CSS

样式表可分为嵌入式样式表、外部样式表和内联样式表三种,在同一文档内可以同时使用三种方法。

发展

1.样式定义放在一个单独的文件中,例:新建一个后辍为CSS的样式定义。

元素{ 属性color:值red;} 在head段使用<link>标记,

引用语法:<link rel=”stylesheet” type=”text/css” href=”样式表URL” />

2.嵌入式样式表:

<style>元素段必须出现在head段内,有一个开始和结束标记,并且可以有多个<style>段

语法格式: <style type=”text/css”>

…样式定义…

样式

3.在嵌入式样式表中我们可以使用@import导入一个外部样式表,例:

<style type=”text/css”>

@import url(外部样式表位置);

…其它嵌入式的样式定义…

</style>

4.内联样式表:

写在开始标记里面,比如你要H1变红色,

<h1 style=”color:red;”>变为红色</h1>

总结: 三种样式表优先使用外部样式表、嵌入式样式表用来调试用的、一般不使用内联样式表。

本回答被网友采纳
第2个回答  2014-08-06
图片的缩放功能你可以用zoom来试试,后面更一个属性值,可以为百分数,也可以为浮点实数。希望对你有帮助,请采纳。

可以直接这样子:zoom:0.75是缩放75%
第3个回答  推荐于2017-11-17
如果你不考虑低版本的浏览器,可以使用background-size: 100% 100%;这样图片就可以跟者div的变化而进行伸缩如果考虑兼容性:<div style="width: 100%; height: 300px;"> <img style="width:100%; height:100%;" src="xxx.jpg"/> </div>
第4个回答  推荐于2016-01-29
你好,是根据串口大小来自动调整的么?
这样:
body {
background: url("./../img/bg.jpg") fixed center center no-repeat;
background-size: cover;
width: 100%;
}本回答被提问者和网友采纳

div+css怎么让背景图片自动缩放
.imgDiv{ width:500px;height:500px;background-image:url('..\/images\/index.jpg');-moz-background-size: 100% 100%;-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;-moz-border-image: url(.\/btn.png) 0;background-repeat:no-repeat...

div+css如何改变背景图片大小
1-把图片放在div的背景图里,再利用css3的background-size属性,语法:background-size: length|percentage|cover|contain;这个CSS3的属性作用是把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中,如果不使用这个属性,在IE11和FireFox中缩放浏览器,背...

div+css 如何让背景图片横向缩小
背景图片实现不了缩放,是多大就是多大,只可以设置背景图片的位置,和重复等属性,没有缩放属性,背景图片大于容器,容器只会截取某部分,小了则根据你的定义重复显示,或者不重复,补背景颜色等

div背景图片大小随div大小变化而变化怎么做到
div背景图片大小随div大小变化而变化,可以指定背景图片的尺寸来实现,详细方法如下:CSS样式文件中,针对img标签添加:background-size属性 详细操作如图:background-size:cover属性的作用详解:他的作用是,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区...

CSS中让DIV背景图片自适应
把图片设置成合DIV一样的高和宽就行了。但这样会导致图片大小变形了,很难看的。如果选择自适应的话又会使自己的DIV一会大一会小,网站整体都变形了,这个东西不好弄的。

怎样让一张图片随着div大小的变化而变化?
1、新建一个html页面,并在页面中写上一个div。并为div添加背景图片,为背景图片添加一些基本的样式。2、按下键盘上的F12,查看其在浏览器中的效果。3、利用css中的伪元素::after或者::before。4、利用伪元素是将指定标签的前面或者后面的内容设为空,并设成块元素,并设定以百分比为单位的padding-...

怎么让图片自适应div怎么让图片自适应div大小
制作css手机版页面时如何使背景图片适应div的高度和宽度 具体步骤如下:1.输入位置:固定;top:0;左:0;将整个div固定在屏幕的顶部和左侧。2.输入宽度:100%;身高:100%;最小宽度:1000像素;这个可以适合div的高度和宽度,而min-width是在屏幕宽度在1000px以内的情况下,保持div的大小不变。3.输入...

css中如何调整插入背景图片的大小
4. 使用自动调整 如果只设置一个值,那么第二个值可以设置为`auto`。这样,背景图片会保持其原始宽高比,同时满足你所设定的尺寸要求。例如,`background-size: 500px auto;`会让图片保持原始的宽高比,同时宽度被限制在500像素以内。在实际应用中,结合使用CSS的背景属性,如`background-image`、`back...

如何利用css将图片设置为背景图,根据不同分辨率的屏幕,自动缩放
你可以将图片的宽高设置成根据浏览器窗口大小来进行自动调整,首先获取到screenX,screenY,然后将图片的大小设置为该值的百分比,就可以自动缩放了。

css如何让图片自适应屏幕宽度,缩小屏幕时图片不是向右侧的图片一样变形...
<div style="position:relative; width:100%; height:505px; overflow:hidden"> <img src="图片链接,我这里用的是1920*505的" style="position:absolute; left:50%; top:0; width:1920px; height:505px; margin-left:-960px"\/><\/div>如果把图片作为背景图就更简单:<div style="width:...

相似回答