<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Wsscat DEMO</title>

    </head>

    <body>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

    </body>

    <style>

        body {

            margin: 0;

            padding: 0;

        }

        .box {

            float: left;

            width: 30%;

            margin-top: 10px;

            margin-left: 2.5%;

            height: 0;

            padding-bottom: 33.98%;//或者padding-top

            background-color: #dbe0e4;

            background-image: url(1.jpg);//图片不要用标签，用这两个属性配合会更好控制图片缩放

            background-size: cover;

        }

    </style>

</html>

css3图片响应式布局的更多相关文章

  1. CSS3之响应式布局

    在没有C3的时候,响应式布局是通过js来实现的. 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以 ...

  2. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  3. CSS3之响应式布局及其应用

    使用 Media 属性前需添加兼容移动设备优先代码 <meta name=”viewport”content=”width=device-width,initial-scale=1.0,maxi ...

  4. 【CSS3】响应式布局

    准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 1 <meta name="viewport" content ...

  5. 原生css3作响应式布局

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. css3media响应式布局

    响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的 普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很 ...

  7. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  8. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  9. 响应式布局（CSS3弹性盒flex布局模型）

    传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...

随机推荐

  1. nodejs之Buffer

    Buffer是什么? 简单点理解,buff就是固定长度的uint8array.(es6已实现TypedArray). 由于是固定长度所以没有了splice,concat方法. 由于是固定类型所以没有了 ...

  2. 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

    一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:   ...

  3. 整合SSM框架应用

    普通方式 新建spring模块时引入如下内容: 启用devtools插件(热部署插件) idea需要做如下配置 settings-build-compiler->勾选build project ...

  4. bzoj3477[Usaco2014 Mar]Sabotage

    题意 给出一个长为n的正整数序列(n<=1e5),要求选出一个非空前缀和一个非空后缀(这两段不能够加起来组成整个序列),使得这个前缀和后缀中的所有数字一起求平均数的结果最小 分析 最大/最小化平 ...

  5. BZOJ4972 小Q的方格纸

    每个格子记录其左下的45°直角梯形区域的和及左下矩形区域的和即可. #include<iostream> #include<cstdio> #include<cmath& ...

  6. Day20-单表中获取表单数据的3种方式

    1. 搭建环境请参考:http://www.cnblogs.com/momo8238/p/7508677.html 2. 创建表结构 models.py from django.db import m ...

  7. 【转】NHibernate主键类型介绍

    转自:http://blog.163.com/wzx_dd/blog/static/1942850722012828934553/ 最近整合了一下框架,用SSH搭建了一个框架,但是在整合好之后,启动t ...

  8. 【CF954I】Yet Another String Matching Problem（FFT）

    [CF954I]Yet Another String Matching Problem(FFT) 题面 给定两个字符串\(S,T\) 求\(S\)所有长度为\(|T|\)的子串与\(T\)的距离 两个 ...

  9. 【bzoj2115】【wc2011】Xor

    2115: [Wc2011] Xor Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 5380  Solved: 2249[Submit][Status ...

  10. move_base的 局部路径规划代码研究

    base_local_planner teb_local_planner parameter code g2o base_local_planner ROS wiki Given a plan to ...