保证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. Android Studio 设置字体

    File->Settings->Editor->Colors & Fonts->Font->Editor Font

  2. flask内容之数据库的管理

    #! /usr/bin/env python # *-* coding: utf-8 *-* from flask import Flask, flash, redirect from flask i ...

  3. HTML5 学习06——Geolocation（地理定位）

    HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. HTML ...

  4. ASP.NET WebApi 基于JWT实现Token签名认证

    一.前言 明人不说暗话,跟着阿笨一起玩WebApi!开发提供数据的WebApi服务,最重要的是数据的安全性.那么对于我们来说,如何确保数据的安全将会是需要思考的问题.在ASP.NET WebServi ...

  5. ReactRouter升级 v2 to v4

    概述 react-router V4 相对于react-router V2 or V3 几乎是重写了, 新版的react-router更偏向于组件化(everything is component). ...

  6. ps保存时提示最大兼容

    在菜单:编辑-首选项-文件处理可以设置要不要询问

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

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

  8. ionic使用iframe时无法显示网页或报错

    ionic使用iframe时无法显示网页或报错 Uncaught DOMException: Blocked a frame with origin 在config.xml中添加 <access ...

  9. Docker入门 - 002 Docker 的简单操作

    系统要求:CentOS 7.2 64 位操作系统. Docker 的简单操作 下载镜像 下载一个官方的 CentOS 镜像到本地 docker pull centos 下载好的镜像就会出现在镜像列表里 ...

  10. DMA（直接存储器存取）

    DMA(Direct Memory Access) DMA(Direct Memory Access)即直接存储器存取,是一种快速传送数据的机制. 工作原理 DMA是指外部设备不通过CPU而直接与系统 ...