保证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. web (Servlet)

    1.如果你文档新建的出现很多红色的小擦擦出错 这样做

  2. JAVA自学笔记03

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

  3. .Net core下的配置设置（二）——Option

    我在前面的文章.Net core下的配置设置(一)——Configuration中介绍了.net core下配置文件的读取方法,在.net core中,直接从Configuration对象中读取的并不 ...

  4. 利用referer属性，记录百度搜索跳转参数

    从百度搜索结果跳转到指定链接前,百度会发送一些参数,可以利用referer属性,在本站访问时记录百度跳转来之前的一些参数. 利用百度跳转前参数,进行一些相关的seo优化. 目前所用到的一些参数说明如下 ...

  5. FileUpload1.PostedFile.FileName 获取的文件名

    例如文件叫做 c:\web\a.jpg 如果用IE,则返回   c:\web\a.jpg 含路径 如果用Chrome,则返回 a.jpg 不含路径.

  6. windows下Graphviz安装及入门教程

    下载安装配置环境变量 intall 配置环境变量 验证 基本绘图入门 graph digraph 一个复杂的例子 和python交互 发现好的工具,如同发现新大陆.有时,我们会好奇,论文中.各种专业的 ...

  7. ImportError: No module named _tkinter on macos

    MAC OS 10.11.6 lMacBook-Pro:~ xiaomilbq$ python Python 2.7.14 (default, Sep 22 2017, 00:05:22) [GCC ...

  8. ESP-EYE V2.1 开发板 WINDOWS 10 开发入门

    准备工作 1 × ESP-EYE V2.1 开发板 1 × Micro USB B 电缆 1 × PC(Windows10) 简介 ESP-EYE 是一款面向人脸识别和语音识别市场的开发板,搭载 ES ...

  9. Java WebSocket实现网络聊天室(群聊+私聊)

    1.简单说明 在网上看到一份比较nice的基于webSocket网页聊天项目,准备看看学习学习,如是有了这篇文章!原博主博客:http://blog.csdn.net/Amayadream/artic ...

  10. MVP模式在Android中的使用

    转载了一篇博客.博客来自:http://www.liuling123.com/2015/12/mvp-pattern-android.html 觉得博主写的非常好 曾经在写项目的时候.没有过多考虑架构 ...