css背景图片自适应
发布网友
发布时间：2022-04-21 20:47
我来回答
共3个回答
热心网友
时间：2022-04-06 12:17
用background-size属性，你想给他多大的百分比都可以，不设置表示默认图片大小，设置100%表示全屏显示图片，按比例缩小或者放大。
这样就可以实现背景图片自适应父容器大小而自动变化，达到填充效果。 但是，图片会被拉伸填充，这并不是我们想要的效果，那么我们可以不设置 100% 参数，而是使用 cover 参数。
设置cover参数以后，背景图会按比例缩放填充满整个背景。如果使用IE浏览器你会发现，上面的 background-size:100% 100%; 并没有起到作用，图片原本是怎样就怎样显示，比较大就只能显示一部分。
所以这时需要使用IE特有的滤镜 AlphaImageLoader 兼容性在IE5.5+以上版本的浏览器上都可以完美运行。
1、enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false_ true: 默认值。滤镜激活。
2、false: 滤镜被禁止。
3、sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
4、crop: 剪切图片以适应对象尺寸。
5、image: 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
6、scale: 缩放图片以适应对象的尺寸边界。
7、src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
特性:
1、Enabled: 可读写。布尔值(Boolean)。参阅 enabled 属性。
2、sizingMethod: 可读写。字符串(String)。参阅 sizingMethod 属性。
3、src: 可读写。字符串(String)。参阅 src 属性。
说明:
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG格式，则0%-100%的透明度也被提供。
PNG格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG格式的图片完全透明区域后面的内容。这样我们就可以完美兼容绝大多数的浏览器，实现用CSS让背景图片100%填充了。
热心网友
时间：2022-04-06 13:35
如果是背景图片的话是不能自适应大小的，最多能改变其位置，
background:url(1.jpg) no-repeat center center;
如果是img标签的话，直接width:100%;height:100%;就可以了
热心网友
时间：2022-04-06 15:09
实现代码参考：
浏览器支持：
Firefox 3.6+ , Chrome 1.0+ , Opera 9.63+, IE9 +
具体写法
<style>
.container{background-image:url(‘’) ;background-attachment:fixed;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover;}
</style>
<body>
<div class=”container”>
</div>
</body>
css中如何调整插入背景图片的大
5. `contain`模式：`background-size: contain;`，图片缩放以适应容器，保持其宽高比，可能使图片裁剪。对于自适应和全屏背景图片，你可以使用JavaScript动态调整图片尺寸，如设置`div`元素的高度和宽度等于浏览器窗口的大小。或者使用CSS的`background-size`属性结合`filter`和`-moz-background-size`等浏...
css背景图片自适应
用background-size属性，你想给他多大的百分比都可以，不设置表示默认图片大小，设置100%表示全屏显示图片，按比例缩小或者放大。这样就可以实现背景图片自适应父容器大小而自动变化，达到填充效果。 但是，图片会被拉伸填充，这并不是我们想要的效果，那么我们可以不设置 100% 参数，而是使用 cover 参数。设...
怎么让图片自适应div怎么让图片自适应div大小
制作css手机版页面时如何使背景图片适应div的高度和宽度 具体步骤如下:1.输入位置:固定；top:0；左:0；将整个div固定在屏幕的顶部和左侧。2.输入宽度:100%；身高:100%；最小宽度:1000像素；这个可以适合div的高度和宽度，而min-width是在屏幕宽度在1000px以内的情况下，保持div的大小不变。3.输入背...
CSS设置背景图宽度100%,高度自适应
padding-top= (高度/宽度)*100%;即图片的高度与宽度的比例,因此就能实现背景图宽度100%，高度自适应 为了达到更好的效果再配合cover和center
js和css如何设置背景全屏图片不受垂直滚动条影响?
设置图片自适应。首先设置一个div 用来装 img ，div 的宽 为图片的宽，一般使用百分百就可以了，例如 width:100%; 不要设置高度，让图片自动撑开高度。然后设置 img 的 width:100%; display:block; 将标签 img 设置为块级元素。这样不管 div 的宽为多大，图片都是根据 div 等比例缩放。
HTML中的图片如何自适应屏幕?这篇文章有图片的自适应用法介绍
使用CSS实现图片自适应时，需要注意zoom属性宽高赋值不能带单位，否则无效。if和else语句必须带大括号括起来，单句指令不行。最后一个方法是放置背景图片，如果背景图片很大，一般显示器显示合适。若想适应移动设备，可以使用CSS3属性background-size:cover，将背景图铺满整个浏览器窗口。以上是关于HTML中图片...
css中如何调整插入背景图片的大小
可以通过cover和contain来对图片进行伸缩。语法：background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */ background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */ background-size:10%;/* 0％~100％之间的任何值，将背景图片宽...
html/css 网页背景图片,如何自适应宽度,长度不压缩? div如何半透明?详解...
330px; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:100; background-color:#ffffff; } --> 横向平铺背景。div透明度，继续参考下面代码 这里是透明的DIV
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...
如何通过css来控制背景图大小?
通过设置background-size 的属性设置图片大小。css语法：background-size: length|percentage|cover|contain;一、html代码：二、简单的CSS，给body加上背景设置：三、效果如下：
