有时候自己为了控制图片的响应式,按比例缩小放大图片,如果解决这个问题,用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(按比例缩小图片)的更多相关文章

  1. HTML5、CSS3与响应式Web设计入门(2)

    HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...

  2. 如何通过CSS3 实现响应式Web设计

    如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...

  3. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  4. css3网站响应式写法

    css3响应式写法因为media不支持ie9以下的浏览器 所有要加个判断<pre> <!-- 全部通用的 --><link rel="stylesheet&qu ...

  5. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

  6. HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

  7. html5、css3及响应式设计入门

    一.响应式设计的定义 将三种已有的开发技巧(弹性网格布局.弹性图片.媒体和媒体查询)整合起来,命名为响应式网页设计.真正的响应式设计方法不仅仅只是根据视口大小改变网页布局.相反,它是要从整体上颠覆我们 ...

  8. 【CSS3】响应式布局

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

  9. CSS3之响应式布局

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

随机推荐

  1. DataSet装换为泛型集合 222

    #region DataSet装换为泛型集合 /// <summary> /// 利用反射和泛型 /// </summary> /// <param name=" ...

  2. C#获取屏幕鼠标所指点的颜色

    有时候要获取屏幕某一点的坐标颜色值,可以如下实现: 在VS2012中创建一个C#的Windows窗口应用程序,然后在Form上添加PictureBox和Button两个控件,并加入以下代码. //需要 ...

  3. android Sqlite小记

    1.android.database.sqlite.SQLiteException: near "": syntax error (code 1): 语法错误,如果你的报了这个错误 ...

  4. 网站添加第三方登陆(PHP版)

    这两周正在写毕业设计,我做的是一个问答网站.先介绍一下这个网站:这是一个关于大学生在线问答的网站,类似知乎和百度知道,不过功能没有人家多,毕竟这个网站我一个人在做.网站部署在阿里云,网站包括API,W ...

  5. 转:大神提出来的java服务器方面面试问题(当作自己的学习目标平时得多注意)

    因为一些个人原因,陆陆续续参加了一些校招补招.社招的笔试和面试(BAT),也包括一些国外公司(Spotify, Google, Ericsson),最后有幸被网易收入麾下,拿到了S.下面罗列一些我复习 ...

  6. 控制台查看原生sql

    情况:当tomcat运行时,项目运行过程中,控制台没有打印出原生sql语句: 解决办法如下: 在 META-INF  文件夹下,查找 persistence.xml 这个文件(这里注意可能一个项目不止 ...

  7. 1.Android 视图及View绘制分析笔记之setContentView

    自从1983年第一台图形用户界面的个人电脑问世以来,几乎所有的PC操作系统都支持可视化操作,Android也不例外.对于所有Android Developer来说,我们接触最多的控件就是View.通常 ...

  8. 分享篇——我的Java学习路线

    虽然之前我是开发出身,但是我学习的语言是Objective-c,这个语言使用起来范围比较窄,对于自动化学习来说也是无用武之地,所以我自己学习了Java,对于一个有开发经验的人来说学习一门新语言相对来说 ...

  9. Esri的开源JS项目杂谈

    一提到Esri大家首先想到的是庞大的ArcGIS产品大家族,其产品包含从桌面端,到服务器/云端,再到web/移动端.作为一名极客,不聊开源逼格似乎上不去啊.其实,Esri作为一个开放的平台,不仅有稳定 ...

  10. [NHibernate]利用LINQPad查看NHibernate生成SQL语句

    上篇文章中我们提到可以通过重写NHibernate的 EmptyInterceptor 拦截器来监控NHibernate发送给数据库的SQL脚本,今天看到有朋友用LINQPad工具来进行NHibern ...