保证1920px的图片，在低分率率的电脑上也能正常显示，两边裁剪，中间居中，高度不变

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

<div class="test">

  <div style="width: 100%;height: 390px; background: url(http://imagecdn0.17huo.com/o_1bvue57hgbp8ms1diu18ctjnrh.jpg) no-repeat center;background-size: 1920px 390px;"></div>

</div>

</body>

</html>

css背景图宽度只适应，高度不变的更多相关文章

  1. html的css背景图的repeat

    HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...

  2. css背景图与html插入img的区别

    一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...

  3. Lodop打印控件不打印css背景图怎么办

    background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...

  4. css背景图撑开盒子高度

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css背景图充满屏幕

    代码: body { /* 加载背景图 */ background: url(resource/inv_bg.png); /* 背景图不平铺 */background-repeat: no-repea ...

  6. css背景图等比例缩放，盒子随背景图等比例缩放

    很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤. ...

  7. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

  8. CSS背景图怎么自适应全屏（手机或者电脑）

    #demo{ background-img:url(../bg.png); --(1)适用于上半部分背景图片,下半部分纯色 将背景图像等比缩放到完全覆盖屏幕,背景图有可能超出屏幕(容器) backgr ...

  9. vue的挖坑和爬坑之css背景图样式终极解决方法

    原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.v ...

随机推荐

  1. h5新增属性

    localStorage,sessionStorage,video,audio的使用方法 <!DOCTYPE html> <html lang="en"> ...

  2. Visual Studio VS使用freopen调试控制台闪退

    解决方法 freopen("CON", "r", stdin);    system("pause>nul"); 暂停函数之前,使用f ...

  3. RWA风险加权资产

    风险加权资产(risk-weightedassets,简称RWA)是指对银行的资产加以分类,根据不同类别资产的风险性质确定不同的风险系数,以这种风险系数为权重求得的资产. 分为权重法和内评法. 内评法 ...

  4. SDN中的Heavy-Hitter测量文献阅读

    Heavy Hitter Detection and Identification in Software Defined Networking 来源:International Conference ...

  5. Sqoop: ERROR manager.SqlManager: Error reading from database: java.sql.SQLException:

    sqoop import --connect jdbc:mysql://122.206.79.212:3306/dating --username root --password 123456 --t ...

  6. sublime项目的添加删除

    方便多个项目之间切换修改代码

  7. 《2019测试面试题-上海悠悠.pdf》

    前言 面试测试岗位一般会有笔试题,笔试题考SQL和编程基础比较多,小编最近收集了多家公司的测试面试题,整理成一个文档供大家参考. 2018年下半年一直不太平,听到最多的就是"p2p暴雷&qu ...

  8. make[1]: *** [storage/perfschema/unittest/CMakeFiles/pfs_connect_attr-t.dir/all] 错误 2 解决方法

    make[2]: *** [storage/perfschema/unittest/pfs_connect_attr-t] 错误 1 make[1]: *** [storage/perfschema/ ...

  9. IoC之AutoFac（二）——解析服务

    阅读目录 一 Resolve方法 二 TryResolve和ResolveOptional方法 三 解析服务时传参 3.1 可用参数类型 3.2 带反射组件的参数 3.3 具有Lambda表达式组件的 ...

  10. linux内核剖析（八）进程间通信之-管道

    管道 管道是一种两个进程间进行单向通信的机制. 因为管道传递数据的单向性,管道又称为半双工管道. 管道的这一特点决定了器使用的局限性.管道是Linux支持的最初Unix IPC形式之一,具有以下特点: ...