精华内容
下载资源
问答
  • css图片自适应大小
    千次阅读
    2022-01-14 12:28:40

    这里只介绍两种方式,一种是利用<img>标签,一种是设置style的background;当然肯定不止这两种方式

    <img>标签

    /* css */
    img{
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    

    background

    body {
        background: rgb(129, 155, 190) url(背景.jpeg);
        /* 决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动 */
        background-attachment: fixed;
        /* 图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。 */
        background-size: cover;
        width: 100%;
        height: 100%;
      }

    学习

    更多相关内容
  • css图片自适应大小

    2020-10-30 14:57:51
    css图片自适应大小
  • 对于一个网页来说,有一张好看又清晰的背景...本篇文章将来介绍关于css图片自适应大小的方法。我们下面就来直接看一个例子:position:fixed;top: 0;left: 0;width:100%;height:100%;min-width: 1000px;z-index:-10;...

    对于一个网页来说,有一张好看又清晰的背景图片是非常吸引人的,但是并不是每张图片都是有相同的大小,所以就需要晒西安图片的自适应,那么,css怎么让图片自适应呢?本篇文章将来介绍关于css图片自适应大小的方法。

    我们下面就来直接看一个例子:

    position:fixed;

    top: 0;

    left: 0;

    width:100%;

    height:100%;

    min-width: 1000px;

    z-index:-10;

    zoom: 1;

    background-color: #fff;

    background-repeat: no-repeat;

    background-size: cover;

    -webkit-background-size: cover;

    -o-background-size: cover;

    background-position: center 0;

    }

    对于上述这个例子,我们来分析一下这个css代码怎么让图片自适应大小。

    首先我们来看看这三句在css图片自适应大小中有什么作用:position:fixed;

    top: 0;

    left: 0;

    说明:这三句是让整个div容器固定在屏幕的最上方和最左方。

    其次我们来看看下面这几句在css图片自适应大小中的作用:width:100%;

    height:100%;

    min-width: 1000px;

    说明:这几句让整个div跟屏幕实现一模一样的大小,从而达到全屏效果,而min-width是为了实现让屏幕宽度在1000px以内时,div的大小保持不变,也就是说在这种情况下,缩放屏幕宽度时,图片不要缩放(只有在1000px以内才有效)。

    接下来我们来看一看这个代码:z-index:-10;

    说明:这个是让整个div在HTML页面中各个层级的下方,正常情况下,第一个创建的层级z-index的值是0,所以如果我们这里写成-1也可以实现,不过这里写-10是确保整个div在最下面,因为如果页面中层级太多了,有的时候用-1不一定在最下面,但如果写成-100这样大数字的也没有什么意义。用index:-10

    以此能达到看上去像背景图片,其实是一个最普通的div,只是层级关系变了,才让人看上去看是背景图片。background-repeat: no-repeat;

    注意:这个是背景不要重复。background-size: cover;

    -webkit-background-size: cover;

    -o-background-size: cover;

    说明:上面三句是一个意思,就是让图片随屏幕大小同步缩放,但是有部分可能会被裁切,不过不至于会露白,下面两句是为chrome和opera浏览器作兼容。

    最后来看一看最后一句:background-position: center 0;

    说明:上面这句的意思就是图片的位置,居中,靠左对齐。

    以上这篇文章到这里就结束了,如果你想对上述css代码中所提到的各个属性有更多的了解可以参考css手册。

    相关推荐:

    展开全文
  • 编辑器上传的图片太大了,把FF和IE撑的走形,所以希望图片在某些页面里要有固定大小,如果需要某个范围,用getElementByname来设定,也是一个道理:
  • CSS图片自适应大小

    万次阅读 2017-04-02 09:46:16
    图片自适应内容区大小

    在页面中,由于局部图片过大,造成元素溢出显示,一般不建议直接在相应父元素处使用overflow=hidden; 。这种方式只会将溢出的元素直接裁减掉,因此会出现图片信息缺损。

    使用网易邮箱多的人可以发现,在内容区插入图片时,图片会被自动调整为合适大小,便于在收件时正常显示。因此,如何处理图片大小变得很关键。

    常见处理策略:

    将需要插入图片的父元素处设置大小,图片元素设置max-width即可。由于图片只需设置宽或者高即可自适应变化。

    代码如下:

    <html>
      <head></head>
      <body>
        <div class="main-container">
            <img src="**" alt="**"/>
        </div>
      </body>
    </html>
    html,body,.main-container{
      width:100%;
    }
    .main-container img{
      max-width:100%;
    }
    
    展开全文
  • css控制图片自适应大小

    万次阅读 2019-04-29 15:28:51
    图片外层 用一个div包裹着 div { display: flex; justify-content: center; align-items: center; width: 定值; height: 定值; } img { width:auto; height:auto; ...

    图片外层 用一个div包裹着

    以长边为标准,短边自适应:

      div {
        	display: flex;
         	justify-content: center;
          	align-items: center;
          	width: 定值;
          	height: 定值;
          	}
       img {
        	width:auto;
            height:auto;
            max-width:100%;
            max-height:100%;
    		}
    

    以短边为标准,长边中间截断:

    object-fit: cover
    

    object-fit 控制内容在框中的填充方式
    由以下的一个单独关键字来指定

    none: 保持原有尺寸,不会进行缩放
    contain: 按比例缩放图片,刚好在容器盒子里完全展示|
    cover: 宽高按比例缩放,超出容器的部分居中裁剪
    fill: 平铺满容器,宽高会被拉伸
    scale-down: 取none和contain中生成的对象尺寸小的那个

    展开全文
  • 介绍: 无论图片大或者小都会被强制到580px
  • 由于用户上传的图片太大自己又不去调解,导致展示的时候图片太大撑开了,直接影响了界面的美观度,于是想使用css属性尝试控制下:给图片设置显示最大的宽度,还好Firefox/Opera/IE7都提供了max-width属性支持,感兴趣...
  • 本文介绍了CSS实现网页背景图片自适应全屏的方法,分享给大家,具体如下: 网页背景自适应全屏.PNG 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率...
  • 介绍: 无论图片大或者小都会被强制到580px
  • css 图片自适应

    千次阅读 2021-09-07 11:43:41
    图片比例不固定,需要自适应显示图片时,可以使用css属性:object-fit object-fit有如下属性值: object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down; fill: ...
  • css怎么设置背景图片自适应大小
  • <div class="container"> <img src=""/> </div> .container{ width:400px; height:400px; } img{ width:100%; height:100%;...图片设置宽高百分百,object-fit为contain即可
  • 在html里面插入图片,让其自适应屏幕大小,可以通过css来完成,下面有个示例,希望对大家有所帮助
  • 在这里补充一下关于图片自适应,这点Mozilla做的比IE好,因为可以用CSS来控制图片自适应。我们都知道Mozilla支持一个max-width 的CSS语法。于是我们这样这样定义图片的全局样式。 img{ max-width:100%;height:auto...
  • css实现图片自适应容器的几种方式

    万次阅读 多人点赞 2019-07-25 21:59:28
    css实现图片自适应容器 经常有这样一个场景,需要让图片自适应容器的大小。 1、img标签的方式 我们马上就能想到,把width、height 设置为100%啊。来看一哈效果。 <div class='div1'> <img src="./peiqi....
  • css图片自适应容器(div)大小

    千次阅读 2021-08-05 00:28:05
    咱们在写页面的时候常常会遇到须要图片自适应容器大小这样的状况,下面我就开门见山的说明一下怎样去实现这样一个效果。css 123备注一下这里的图片大小为200x200pxpromisediv {width:400px;height:400px;border:1px ...
  • css图片自适应div大小怎么做

    千次阅读 2021-06-08 15:26:43
    css图片自适应div大小怎么做内容导读:css图片自适应div大小的控制,为了让图片能够更好的展示,建议使用max-width这个属性。不管是pc端还是移动端,或者是自适应网站,使用max-width都能够让图片的展示更加规范。...
  • css实现图片自适应缩放的两种方法

    千次阅读 2021-07-03 14:02:39
    想要实现图片根据给定宽高来自适应缩放的时候,会想到什么属性?是object-fit: cover;吗? 来试一试!为了展示效果,我特地选了对称的图片。下面两个img元素都有一个div包裹,div设置固定宽高,第一个img标签宽高均...
  • CSS实现背景图片自适应屏幕大小

    千次阅读 2021-05-25 19:43:26
    } 让整个div跟屏幕大小一样 position:fixed; top: 0; left: 0; width:100%; height:100%; zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示对象的缩放比例。兼容IE6、IE7、IE8浏览器,经常会遇到...
  • 背景图片自适应大小(css3)

    千次阅读 2019-06-01 18:52:00
    body { background: url(/img/index.jpg) no-repeat center center fixed; background-size: 100%; } 转载于:https://www.cnblogs.com/Harold-Hua/p/10960587.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,912
精华内容 8,764
关键字:

css图片自适应大小