<!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. 【leetcode】59.Spiral Matrix II

    Leetcode59 Spiral Matrix II Given an integer n, generate a square matrix filled with elements from 1 ...

  2. maven将依赖打入jar包

    将 依赖打入jar包,由于maven管理了所有的依赖,所以将项目的代码和依赖打成一个包对它来说是顺理成章的功能.maven的这个功能之前就用过,但这 次使用时忘了细节,只记得用maven的assemb ...

  3. php关于static和self的一点理解

    在使用和学习laravel的过程中,总会看到类似与static::methods或者static::variable的使用方式,对此感觉到疑惑和不解,后来查阅了相关的资料才知道他是php5.3之后新加 ...

  4. 更改HTTP头信息

    http信息分三部分 1.请求行 GET  lizi.php  HTTP/1.1 2.HTTP头信 Host: localhost Connection: keep-alive Cache-Contr ...

  5. Matlab里面.M文件不能运行，预期的图像也显示不出来的一个原因

    matlab中function函数的函数名与保存的文件名需要一样: 函数名是GAconstrain,文件名保存成GAconstrain.m,不要使用复制时候产生副本GAconstrain(1).m.

  6. laya3d 文件格式

    先认识下laya3d的一些文件 导出文件说明:               ls        ---    场景文件: Json文件,包含场景中所有节点的数据信息,包含光照贴图信息          ...

  7. RPC和WebService的区别

    最近分析的这个系统,逻辑架构中有一层是RPC interface.之前对RPC不熟悉,就上网搜索了一下资料,在此总结一下: RPC是Remote Procedure Calling,远程过程调用的缩写 ...

  8. asp.netMVC中权限控制论

    这里设想了一个简单的思路,如果用户登录了,也就是session中有值才可以在控制器中操作,这样先添加一个控制器,如下代码: public class AuthController : Controll ...

  9. WPF 如何加载图片

    Uri ri = new Uri(AppDomain.CurrentDomain.BaseDirectory + "Resources/exp.jpg"); ImageSource ...

  10. 【比赛】HNOI2018 总结

    一将功成万骨枯,我就是给那些队爷做基数的 一.比赛过程 Day1 看完题,暴力好打,然后就打 觉得第三题模型很好建啊,先看第三题吧(结果第三题是最..的) 图建出来,先看树的情况,设dp试一下 结果一 ...