精华内容
下载资源
问答
  • div背景图片自适应

    2019-10-03 03:40:13
    可以实现背景图片适应div的大小。 background-size有3个属性: auto:当使用该属性的时候,背景图片将保持100% 的大小显示,不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时,图片会自动平铺。这种...
    对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小。
    
    background-size有3个属性:
    
        auto:当使用该属性的时候,背景图片将保持100% 的大小显示,不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时,图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。
    
        cover:当使用该属性时,图片将被缩放至恰好能覆盖div,并且图片被隐藏的部分最少,这种属性在大图背景中应用比较广泛。这点比较难理解,需要结合实践理解。
    
        contain:当使用该属性时,图片被缩放至最大且能被完全展示出来,但是由于图片的的尺寸比例与div的尺寸比例会有不同,所以当图片不能盖住div时,图片会自动平铺。

     

    转载于:https://www.cnblogs.com/chenlove/p/9284958.html

    展开全文
  • div设置背景图片,不重复不变形,还可根据不同屏幕的宽度,自适应高度 效果: 宽度变窄,高度相应比例变窄 宽度变宽,高度相应比例变宽 高度与宽度无法直接自适应,需要找一个中间的属性相串联。 宽度的自适应是...

    div设置背景图片,不重复不变形,还可根据不同屏幕的宽度,自适应高度

    效果:
    宽度变窄,高度相应比例变窄
    在这里插入图片描述
    宽度变宽,高度相应比例变宽
    在这里插入图片描述

    高度与宽度无法直接自适应,需要找一个中间的属性相串联。
    宽度的自适应是根据viewport的width来调整的。
    padding
    padding是根据viewport的width来调整的。
    padding-top和padding-bottom也是根据viewport的width来跳转的。

    那么我们可以通过 padding-bottom属性来间接和width进行自适应。
    padding-bottom的值 = (图片高/图片宽)
    假设 图片像素为1920*1080,则padding-bottom值 = (1080/1920) = 56.25%

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="backgroundImg">
    
        </div>
    </body>
    <style>
        body{
            margin: 0;/*去除div和body之间的间隔*/
        }
        #backgroundImg{
            width: 100%;
            background: url("pc.jpg") no-repeat;/*no-repeat:背景图将不会被重复*/
            background-size: cover;/*背景图片放大到适合元素容器的尺寸,图片比例不变.背景图像的某些部分可能无法显示在背景定位区域中。*/
            padding-bottom: 56.24%;/*起到的效果是让宽度与高度关联,具体数值=(图片高/图片宽)*/
            /*图片分辨率为1202*676 约为56.24%*/
        }
    </style>
    </html>
    
    展开全文
  • div背景自适应占满

    2020-12-26 10:37:30
    background-image: url(../imgs/footerkuang.png); background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%;
    background-image: url(../imgs/footerkuang.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    
    展开全文
  • 只需通过css设置background-size属性为contain, 即background-size:contain 注意:一定要在先设置background之后再设置background-size属性,这样才有效

    只需通过css设置background-size属性为contain
    background-size:contain
    注意:一定要在先设置background之后再设置background-size属性,这样才有效

    展开全文
  • html 标签内背景图片自适应 div 大小

    千次阅读 2018-12-17 15:25:31
    只需通过css设置background-size属性为contain,即 background-size:contain 注意:一定要在先设置background之后再设置background-size属性,这样才有效 转自:...
  • &lt;body style="overflow:hidden;"&gt;...--背景图片--&gt; &lt;div id="web_bg" style="background-image: url(/images/welcome.png);background-siz
  • background: url(../assets/images/bgi.png) no-repeat top; background-size: cover; background-attachment: fixed; width: 100%; height: 100%; position: fixed; zoom: 1; top: 0;...
  • 如何让背景图按div自适应大小

    千次阅读 2019-11-10 15:26:40
    背景图片按照自身比例填满div,可能会导致图片部分未显示, 且在未设置attachment的情况下默认为scroll,当窗口缩放时背景图会出现空白页 具体数值或者百分比,如果只有有一个则按比例缩放 页面缩放时出现...
  • 为一个高宽固定的块元素添加背景图片 在样式表中 添加背景图片的src, background-image: url('../../assets/images/top_bg1.png') ; 通常还需要将背景图片的大小进行调整 ,以适合块元素的大小. ...
  • 参考如下代码,设置背景图片的大小为100% 100%并且设置no-repeat 这样图片就能在div改变的情况下,仍然显示完全 <!DOCTYPE html> <html> <head> <style> #a { background-color: rgb...
  • 图片作为背景自适应填充至div

    千次阅读 2019-09-23 14:41:13
    有一个div,大小会随着屏幕的分辨率而自适应调整,现在要在其中设置一张背景图片,图片完全填充div,同时也需要图片自适应的调整大小 实现方法 css确实不熟悉,只能查找资料,通过查找的资料有提通过设置...
  • div背景自适应铺满

    千次阅读 2019-11-07 16:03:54
    /*主要代码*/ background-image : url(https://img.youpin.mi-img.com/youpinoper/e970212ad0e7afed5333981ada0ba1f5.png)...; ...background-repeat ...div class = " colright_banner " > div > 显示结果
  • 使背景图片自适应pc端和移动端

    千次阅读 2019-07-03 15:43:22
    代码: overflow: hidden; position: fixed; width:100%; height:100%; background: url("image.png") no-repeat; background-size:cover; } 原文:https://blog...
  • 关键是高度自适应,height加百分比是没用的,但是可以使用padding-top,设置成百分比,那样子padding-top就会跟随宽度变化而变化了 .turn1{ width: 100%; padding-top: 25.6%; background: url(../images/turn1...
  • CSS实现背景图片固定宽高比自适应调整

    万次阅读 多人点赞 2018-08-20 18:54:04
    我们讨论的是div背景图片实现固定宽高比自适应调整的方法。这里的图片不是&lt; img&gt;标签一样通过src引入,而是通过css的background-image: url('路径')实现。  实现背景图片固定宽高比缩放我们采用...
  • 如何让div自适应背景图的高度?

    千次阅读 2018-01-10 22:40:57
    背景图片DIV样式添加一个和背景图片高宽比例相同的padding-bottom值即可比如背景图片大小为1903x650,高宽比为34.156%,同时还可以用媒体选择器来更换不同大小的图片及更换高宽比例。 .BackPhoto { background-...
  • 1.效果 2.实现 ...div style="background-size: cover;-moz-background-size: cover;width: 100%;height: 171px;background: url('static/image/1.png') no-repeat center;"> </div> ...
  • background:url(图片路径)no-repeat; width:100%; height:100%; background-size:100% 100%;//火狐浏览器 position:absolute; filter:progid:DXImageTransform.Microsoft.AlphaImageLoa...
  • /* 设置图片以及重复 */ background-image: url(assets/images/safeAuditBg.png); background-repeat: no-repeat; /* CSS3属性 设置大小宽度以及摆放位置*/ background-size: 95% 95%; ba
  • 图片自适应div的大小

    万次阅读 2019-05-16 09:37:14
    图片自适应div的大小。(刚出道的初级菜鸟,如果有大神,请指点指点) 一. 设置div大小和图片的大小同样相等 <div style="width:100px;height:100px;"> <img src="a.jpg" style="width:100px;height:...
  • 背景图片与标签宽高保持一致: div { background-image: url('路径'); background-repeat:no-repeat; background-size:100% 100%; -moz-background-size:100% 100%; }
  • 主要使用:background-size:cover; <body style="width:1024px;height:700px;"> <form id="form1" runat="server">...div style="background-image:url('top2.png');width:100%;height:100%;backgro...
  • 有时候,我们希望容器背景图片自动适用容器宽高,均匀平铺在页面,几行 CSS 代码即可搞定。 实现 给父容器设置即可。 .view{ background-image: url(x.jpg); background-repeat: no-repeat; background-...
  • 背景图片自适应浏览器大小 之前在网上看到的一个小技巧,记录一下:背景图片铺满屏幕并且可以随着浏览器进行自适应,代码如下: <body> <div style="position:absolut...
  • 背景图片如何自适应,不管屏幕尺寸改变都可以正常显示,不留白也不重复 首先,如果是给整个屏幕设置背景图的话,最好不要给body设置背景,body权重大 所以: 即使是整个屏幕,也别给body设置背景,宁愿写个最大的div...
  • 背景图片自适应,不重复

    千次阅读 2018-11-04 21:02:13
    效果图
  •  在我的一个项目中用到了背景图片,发现其中有一个问题,当页面长度动态变化时,原来能占满全部内容背景的图片会变得不能占满全部背景。如下图的效果: 这是正常的,背景图片占满全屏 当页面内容变长出现了...
  • div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; } 亲自试一试   浏览器支持 亲自试一试 - 实例 IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,281
精华内容 5,712
关键字:

div背景图片自适应