有时候自己为了控制图片的响应式，按比例缩小放大图片，如果解决这个问题，用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. git 发布命令

    git add . git commit -m "备注" git push -u origin master

  2. Ubuntu16.04安装有道词典

    1.首先需要安装依赖包gstreamer0.10-plugins-ugly_0.10.19-2.1_amd64.deb,但是该依赖包 仍有两个依赖包需要提前安装,这三个依赖包都可以从这里下载 下载之后 ...

  3. 存储过程 Row_number() 分页

    ---恢复内容开始--- 自己之前一直是使用的通用的存储过程 ,也是封装好的只要传表名 + 条件 等等 来到新环境 让自己写一个存储过程, 没办法 自己就需要写一个咯 之前写的比较多的是 按 top ...

  4. 如何用qq代理发送邮件

    今天我想写一篇服务器发送验证邮件的的文章,我查阅过其他博客里面写的文章,都是可以实现的,但是对于初学者来说是一个很痛苦的事情,很多代码看不懂,原因有多种,写的多,写的乱,然后就不想往下看了.我今天详细 ...

  5. 关于 Java(TM) Platform SE binary 已停止工作 的解决方法

    一.问题描述 昨天晚上Myeclipse还用着好好的,今天早上打开工程,只要运行就卡住,大半天弹出个消息窗口:Java(TM) Platform SE binary 已停止工作. 如图 关闭Myecl ...

  6. git push　报错！！！！

    [root@NB sh]# git push To git@x0.xx.xxx.x1:yanjing_chenl/IT-DOC.git ! [rejected] master -> master ...

  7. Web Js 按键事件……Enter提交事件 Enter Js事件

    $(document).ready(function(){ document.onkeydown = function (event){ if (event.keyCode==13) //回车键的键值 ...

  8. C 标准库系列之概述

    基本上很多编程语言都会提供针对语言本身的一系列的标准库或者包,当然C语言同样也有提供标准库,C语言的标准库是一系列的头文件的集合:如assert.h.ctype.h.errno.h.float.h.l ...

  9. oracle undo回滚段详解

    1.Undo是干嘛用的?   在介绍undo之前先说一下另外一个东西 transaction ,翻译成交易或事务.我们在进行一个事务的过程中需要申请许多资源,一个复杂的事务也需要很多步来完成.那么一个 ...

  10. Linux 2.6内核中新的锁机制--RCU

    转自:http://www.ibm.com/developerworks/cn/linux/l-rcu/ 一. 引言 众所周知,为了保护共享数据,需要一些同步机制,如自旋锁(spinlock),读写锁 ...