不用css3的响应式img(按比例缩小图片)
有时候自己为了控制图片的响应式,按比例缩小放大图片,如果解决这个问题,用js吧,很麻烦、也会损失很大的加载运行速度等;所以我们还是用css来解决这个问题,用css来强制按比例压缩图片的高度或宽度,看代码不说话:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul,li{margin: 0;padding: 0;list-style: none;} .detail{
width: 100%;
}
.detail ul{
width: 100%;
padding: 5px;
overflow: hidden;
}
.detail ul li{
float: left;
width: 50%;
}
.detail ul li a{
display: block;
width: 100%;
}
.detail ul li .imgBox{
width: 100%;
height: 0;
padding-bottom: 60%;
overflow: hidden;
position: relative;
}
.detail ul li .imgBox img{
display: block;
width: 100%;
height: 100%;
position: absolute;
} .aBox{
display: block;
width: 300px;
height: 300px;
position: relative;
background-color: #ccc;
}
.aSmall{
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 50px;
}
</style>
</head> <body>
<div class="detail">
<ul>
<li>
<a href="">
<div class="imgBox">
<img src="http://images.cnblogs.com/cnblogs_com/shoestrong/866556/o_see.jpg" alt="" />
</div>
<div class="textBox">
这是文字信息
</div>
</a>
</li>
<li>
<a href="">
<div class="imgBox">
<img src="http://images.cnblogs.com/cnblogs_com/shoestrong/866556/o_see.jpg" alt="" />
</div>
<div class="textBox">
这是文字信息
</div>
</a>
</li>
</ul>
</div>
</body> </html>
这是一个图文混排的小栗子,你放大或缩小页面,你发现了什么?你明白了吗?
可参考:https://jsfiddle.net/boxiang_hbx/wrf4xshn/4/
不用css3的响应式img(按比例缩小图片)的更多相关文章
- HTML5、CSS3与响应式Web设计入门(2)
HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...
- 如何通过CSS3 实现响应式Web设计
如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- css3网站响应式写法
css3响应式写法因为media不支持ie9以下的浏览器 所有要加个判断<pre> <!-- 全部通用的 --><link rel="stylesheet&qu ...
- 分享22款响应式的 jQuery 图片滑块插件
响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...
- HTML5+CSS3的响应式网页设计:自动适应屏幕宽度
这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...
- html5、css3及响应式设计入门
一.响应式设计的定义 将三种已有的开发技巧(弹性网格布局.弹性图片.媒体和媒体查询)整合起来,命名为响应式网页设计.真正的响应式设计方法不仅仅只是根据视口大小改变网页布局.相反,它是要从整体上颠覆我们 ...
- 【CSS3】响应式布局
准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 1 <meta name="viewport" content ...
- CSS3之响应式布局
在没有C3的时候,响应式布局是通过js来实现的. 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以 ...
随机推荐
- Java异常体系及分类
上图是基本的java异常体系结构. 主要分为2大类:Error和Exception 1.Error:描述了Java运行系统中的内部错误以及资源耗尽的情形.应用程序不应该抛出这种类型的对象,一般是由虚拟 ...
- Sublime Text 2下搭建Python环境常见错误
Sublime Text 2下搭建Python环境时,最容易出的错误就是Python环境配置错误,导致build(Ctrl+B)后没有任何反应. 关于Python编程环境的配置,网上很容易搜索到.先默 ...
- [MySQL] 分页优化
在传统的分页思路影响下,很多人都形成了对于分页的固定理解,也就是给出select语句,先用count()函数计算出总的条目,除与每个页面大小pagesize,然后用ceil取整,得出总的页数,用lim ...
- c模拟c++ const 转换
#include <stdio.h> int main(){ const int constant = 21; const int* const_p = &constant; in ...
- 宏定义#define的用法
预处理#define定义函数 #include <stdio.h> #define Connect(x,y) x##y //"##"表示连接x与y int main(v ...
- SQL中循环和条件语句
.if语句使用示例: declare @a int begin print @a end else begin print 'no' end .while语句使用示例: declare @i int ...
- iOS 9学习系列:打通 iOS 9 的通用链接(Universal Links)
在WWDC 2015 上, Apple 为 iOS 9 宣布了一个所谓 通用链接 的深层链接特性, 视频地址为 [无缝链接到您的 App].虽然它不是一个必须实现的功能, 但还是需要引起一些注意. 在 ...
- [leetcode]leetcode初体验
这几天把之前的设计模式回顾了一遍,整理了一点以前的项目.同学说,打算刷leetcode题目,也勾起了我的兴趣,索性也刷一些题目,再提高一些内功.刚开始进去,leetcode随机分配的题目,直接也就做了 ...
- 11.Object方法
综述 Object是Java中所有类的父类,对它的学习十分的重要, Object的函数除了final方法,基本上都是被设计为要被覆盖的(Override),这节我们就一起来学习这些函数. 1.equa ...
- 感知机(perceptron)概念与实现
感知机(perceptron) 模型: 简答的说由输入空间(特征空间)到输出空间的如下函数: \[f(x)=sign(w\cdot x+b)\] 称为感知机,其中,\(w\)和\(b\)表示的是感知机 ...