保证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. Ruby用百度搜索爬虫

    Ruby用百度搜索爬虫 博主ruby学得断断续续,打算写一个有点用的小程序娱乐一下,打算用ruby通过百度通道爬取网络信息. 第三方库准备 mechanize:比较方便地处理网络请求,类似于Pytho ...

  2. select 多选 （EasyUI）

    <script type="text/javascript" src="/EasyUI/jquery.min.js"></script> ...

  3. 学习Struts--Chap02：Struts2框架各个功能模块和程序执行流程的介绍

    1.Struts2的系统架构: 2.架构中不同Key的作用介绍: servlet Filters:过滤器链,client的全部请求都要经过Filter链的处理. Struts Core:Struts2 ...

  4. jQusery .基础

    1.jQusery 的基本用法 <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...

  5. JAVA自学作业03

    JAVA自学作业03 1.请用最有效率的方式计算2*8的结果 使用位运算是最有效率的. System.out.println(2<<3); 2.请交换两整数的值 int x = 10; i ...

  6. 搭建SpringCloud-Eureka 注册中心以及服务提供与调用 快速了解 SpringCloud-Eureka

    原文地址:  搭建SpringCloud-Eureka 注册中心以及服务提供与调用   纸上得来终觉浅,绝知此事要躬行啊~果然看着很easy,自己搞起来就是各种坑~各位看官,容我慢慢道来~ 关于spr ...

  7. FakeUserAgentError('Maximum amount of retries reached') 彻底解决办法

    报错: FakeUserAgentError('Maximum amount of retries reached') 禁用服务器缓存: ua = UserAgent(use_cache_server ...

  8. 【MySQL】解决You can't specify target table 'user_cut_record_0413' for update in FROM clause

    问题 You can't specify target table 'user_cut_record_0413' for update in FROM clause 原因 待更新/删除的数据集与查询的 ...

  9. SSE图像算法优化系列十九：一种局部Gamma校正对比度增强算法及其SSE优化。

    这是一篇2010年比较古老的文章了,是在QQ群里一位群友提到的,无聊下载看了下,其实也没有啥高深的理论,抽空实现了下,虽然不高大上,还是花了点时间和心思优化了代码,既然这样,就顺便分享下优化的思路和经 ...

  10. Linux 端口转发一则

    目前已知的,公司的网络只有 80.8008(后来又给关了 - -).443 端口的 TCP 可以出去,其它已知的所有端口都被封锁.所以,我的***工具就歇菜了. 最后尝试,通过配置端口转发,将ss主机 ...