保证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. PAT Basic 1006

    1006 换个格式输出整数 (15 分) 让我们用字母 B 来表示“百”.字母 S 表示“十”,用 12...n 来表示不为零的个位数字 n(<10),换个格式来输出任一个不超过 3 位的正整数 ...

  2. Alpha冲刺(4/10)——2019.4.27

    所属课程 软件工程1916|W(福州大学) 作业要求 Alpha冲刺(4/10)--2019.4.27 团队名称 待就业六人组 1.团队信息 团队名称:待就业六人组 团队描述:同舟共济扬帆起,乘风破浪 ...

  3. Vue（三）常用指令

    (1) v-model 双向数据绑定,一般用于表单元素 <script> window.onload=function(){ new Vue({ // el:'.itany', el:'d ...

  4. JAVA自学笔记03

    1.三目运算符 1)格式:(关系表达式)?表达式1:表达式2 true则执行表达式1,false则执行表达式2 @ 例题1 :求两数中的较大值 System.out.println(x>y?x: ...

  5. 机械臂——arduino、marlin固件、printrun软件【转】

    最近了解到,在市面上大多数机械臂控制都采用的arduino这个开源硬件来控制的,而我发现既然会单片机,就没有必要采用arduino来控制了,arduino只是一种为了简化编程而开发一种软硬件控制平台, ...

  6. OUTLOOK - Unable to Delete Meetings

    Error Information: Resolved: Check Meeting room permission.Get-MailboxFolderPermission MeetingRoom_1 ...

  7. MYSQL常用的性能指标总结和归纳

    (1) QPS(每秒Query量)QPS = Questions(or Queries) / uptimemysql> show global status like 'Question%';m ...

  8. Keras运行速度越来越慢的问题

    Keras运行迭代一定代数以后,速度越来越慢,经检查是因为在循环迭代过程中增加了新的计算节点,导致计算节点越来越多,内存被占用完,速度变慢.判断是否在循环迭代过程中增加了新的计算节点,可以用下面的语句 ...

  9. ubuntu install google-chrome-stable

    google-chrome-stable is available on a 3rd Party Repository: Google Chrome (for Stable). Follow the ...

  10. error running git

    I ran xcode-select --install and everything worked for me.