保证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. 基于Tkinter以及百度翻译爬虫做的一个小的翻译软件

    首先看效果: 输入Hello, 可见输出 int. 打招呼 下面看源码: from tkinter import * import requests# 首先导入用到的库 request = reque ...

  2. CSS Flex布局整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  3. 使用JfreeChart生成图表遇到的问题

    生成的图片不显示 需要在web.xml中配置一个指定的Servlet <servlet> <servlet-name>DisplayChart</servlet-name ...

  4. java 规则引擎资料汇集

    1. ibm的developworks中较早的一篇关于规则引擎的文章 https://www.ibm.com/developerworks/cn/java/j-java-rules/ 2. 一篇硕士论 ...

  5. Android的Databinding-需要使用控件id，listener以及布局有include的场景

    主的布局xml文件: <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:bin ...

  6. /etc/passwd /etc/group /etc/shadow 文件的格式说明

    /etc/passwd 存放账户信息: root:x:0:0:root:/root:/bin/bashjianing:x:1011:100::/home/jianing:/bin/bashuserna ...

  7. MySQL性能调优的10个方法 - mysql数据库栏目

    摘要: https://edu.aliyun.com/a/29036?spm=5176.11182482.related_article.1.hbeZbF 摘要: MYSQL 应该是最流行了 WEB ...

  8. Java操作Linuxshell并且获取返回值

    /** * */package com.king.weixin.util;import java.io.BufferedReader;import java.io.InputStream;/*** @ ...

  9. Oracle 之 树查询 START WITH ... CONNECT BY ...子句

    START WITH ... CONNECT BY ...子句是结构化查询中用到的,其基本语法是: select … from tablename start with 条件1 connect by ...

  10. 有钱人都用iphone?

    身边的朋友用iphone, 大家都会调侃真有钱. 大数据显示, 人家是真的有钱. 看看来自腾讯移动分析数据 你玩过抖音就知道, 拍视频, 传视频的过的看着都挺滋润的. 反观用安卓的用户, 前20个应用 ...