CSS制作响应式正方形?什么鬼?干嘛用的?干嘛用的没人有每人的需求,本人也正好是由于公司正在做的业务须要,想做个照片展示的功能(当然得符合响应式了)。而这个照片展示必须符合下面几点功能:1。用三张图片占满屏幕的一行;2,长宽比固定(临时做成正方形)。3,保证图片不扭曲。

业务什么的这里临时不谈,回到正题:利用CSS制作响应式正方形。

响应式正方形,大部分第一想法肯定是设置宽度百分比。然后利用JS动态设置高度。性能什么的这里就不谈了。反正我是认为比較麻烦,正如本人一直坚持的原则:CSS能实现的功能,为何要去麻烦JS?

废话不多说,先上个代码:

<div class='container'>
<div class='content'>content</div>
</div>

接下来是CSS部分:

.container{
width:100%;
position:relative;
display: inline-block;
}
.container:after{
content:'';
display: block;
margin-top: 100%;
}
.content{
position:absolute;
left:0;
right:0;
top:0;
bottom: 0;
<pre name="code" class="css"> background-color: silver;

}


有兴趣的童鞋能够去试试,这段代码的功能就是如上所说的响应式的正方形了。

假设须要制作等比的长方形也是简单,把100%改成50,就变成了2:1的长方形了。

本来想把前文说过的业务实现代码贴出来的,可是认为与题目不正确应,就不罗嗦了,后期有时间直接做个DEMO出来供大家參考。结尾就就简单的说明一下这段代码的关键好了。这段代码一个非常重要的特性在于margin-top:100%这段,官方说明:margin的百分比取值是依据父层元素的宽度来定的。所以margin:100%。正好能够制作一个正方形出来,再将子元素的四个角放到父元素中,子元素就成了一个正方形了。

            background-color: silver;

CSS制作响应式正方形及其应用的更多相关文章

  1. CSS:响应式下的折叠菜单(条纹式)

    原文:CSS: Responsive Navigation Menu 译文:CSS:响应式导航菜单 译者:dwqs 写在之前,关于如何制作响应式的下拉菜单:响应式下的下拉菜单 之前,我写了一篇关于怎么 ...

  2. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  3. CSS实现响应式布局

    用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使 ...

  4. FLASH CC 2015 CANVAS (四)制作响应式设计(自适应)的项目

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误(如果发现我会更新文章)! 正式教程会在后续开始更新 相信你在看了(第二节)(第三节)之后已经能够满足绝大多数的互动需求了.那么也 ...

  5. 用CSS实现响应式布局

    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @ ...

  6. css实现响应式布局的相关内容

    所以我就在做自适应的时候查了一些资料 首先我发现一个问题:有响应式布局和自适应布局两种布局效果 简单来说,响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用 ...

  7. 怎样使用CSS3媒体查询(Media Queries)制作响应式网站

    自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...

  8. 使用纯 CSS 实现响应式的图片显示效果

    有许多方法可以实现页面里图像的响应式显示(Responsive).然而,我碰到的所有方案都使用了JavaScript.这使我疑惑不用 JavaScript 实现图像响应是否可行. 我提出了下面纯CSS ...

  9. 【css】响应式布局入门【转】

    最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...

随机推荐

  1. 关于学习C语言

    c语言作为一种计算机的语言,我们学习它,有助于我们更好的了解计算机,与计算机进行交流,因此,c语言的学习对我们尤其重要. 在这个星期里,我们专业的学生在专业老师的带领下进行了c语言程序实践学习.在这之 ...

  2. jq-文本框只能输入数字

    <input type="text" onKeyUp="value=value.replace(/\D/g,'')"  /> onKeyUp: 当输 ...

  3. C# 多线程系列(五)

    死锁 为了线程安全,我们在需要的是会使用”独占锁“,但过多的锁定也会有麻烦.多个线程因为竞争资源相互等待而造成的僵局,我们称为死锁.若无外力作用,这些进程将都无法推进.在死锁中,至少有两个线程被挂起, ...

  4. html中设置浏览器解码方式

    通过添加一行标签: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"& ...

  5. jQuery——jQuery选择器

    基本选择器 # Id选择器 $(“#btnShow”)选择id为btnShow的一个元素 . 类选择器 $(“.liItem”)选择含有类liItem的所有元素 ele 标签选择器 $(“li”)选择 ...

  6. CNN结构:色温-冷暖色的定义和领域区分(一)

    转自知乎和百度百科:从零开始学后期  (色温的奥秘) 文章: 冷暖色区分?冷暖肤色适用于那些色系的彩妆? 文章:干货 |如何判断人体色冷暖?如何判断色彩冷暖?(值得收藏研读!) -蒜苗的回答     ...

  7. session_start(): open(/var/lib/php/session/sess_tlrp3cpro7gun9uhno8n6futr3, O_RDWR)

    在安装一个网站,结果连接上数据库了但是一直报错.下面贴报错内容和图 错误提示 系统:PHP (Linux) 错误类型:WARNING 内容:session_start(): open(/) 错误位置: ...

  8. 数组的复制 --System.arraycopy()

    import java.util.Arrays; public class HellowWorld { public static void main(String[] argv ) { int[] ...

  9. vue踩坑之路--点击按钮改变div样式

    有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现: <!DOCTYPE html> <html> <head> <me ...

  10. copy.c实现

    #cat copy.c #include <stdio.h> #include <stdlib.h> #include <string.h> int copyFil ...