保证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. Vector源码分析和实例应用

    1.Vector介绍 Vector 是矢量队列,它是JDK1.0版本添加的类.继承于AbstractList,实现了List, RandomAccess, Cloneable这些接口. Vector ...

  2. csrf 跨站请求伪造相关以及django的中间件

    django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware来完成. 1.django中常用的中间件? - proces ...

  3. ES6_入门（2）_const命令

    1. //只读常量,一旦声明,常量的值就不能改变. const PI=3.1415; console.log(PI); PI=6;//报错:es6.html:186 Uncaught TypeErro ...

  4. 2、html补充

    今天补充几个html标签 <body>内常用标签 1.<div>和<span> <div></div> : <div>只是一个块 ...

  5. 直接打开virtualbox报错

    错误现象: Failed to instantiate CLSID_VirtualBox w/ IVirtualBox, but CLSID_VirtualBox w/ IUnknown works. ...

  6. ARM 技术文档

    1. 相关链接 ARM官网: http://infocenter.arm.com/ 比较有用的几个目录: ARM Technical Support Knowledge Articles  一些关于A ...

  7. linux i2c 的通信函数i2c_transfer在什么情况下出现错误

    问题: linux i2c 的通信函数i2c_transfer在什么情况下出现错误描述: linux i2c设备驱动 本人在写i2c设备驱动的时候使用i2c transfer函数进行通信的时候无法进行 ...

  8. 【Java-JPA】让Springboot启动不检查JPA的数据源配置

    #https://stackoverflow.com/questions/24074749/spring-boot-cannot-determine-embedded-database-driver- ...

  9. SSE图像算法优化系列二十：一种快速简单而又有效的低照度图像恢复算法。

    又有很久没有动笔了,主要是最近没研究什么东西,而且现在主流的趋势都是研究深度学习去了,但自己没这方面的需求,同时也就很少有动力再去看传统算法,今天一个人在家,还是抽空分享一个简单的算法吧. 前段日子在 ...

  10. CentOS7开启docker远程访问并在idea中连接使用

    CentOS7开启docker远程访问并在idea中连接使用 1.编辑/usr/lib/systemd/system/docker.service,配置远程访问.主要是在[Service]这个部分,添 ...