手机端图片高度和宽度不能自动比例缩小的问题

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style type="text/css">

    .ui-placehold-img {

        background-color: red;

        padding-top: 31.25%;

        position: relative;

    }

    .ui-placehold-img>span {

        width: 100%;

        height: 100%;

        position: absolute;

        top: 0;

        left: 0;

        z-index: 1;

        background-repeat: no-repeat;

        -webkit-background-size: cover;

    }

    .ui-placehold-img>span.jd {

        width: 50%;

        height: 50%;

        position: absolute;

        top: 25%;

        left: 25%;

        z-index: 1;

        background-repeat: no-repeat;

        -webkit-background-size: cover;

    }

    </style>

</head>

<body>

    <div class="demo-block">

        <div class="ui-placehold-img">

            <span style="background-image:url(http://img0.bdstatic.com/img/image/shouye/PC%E9%A6%96%E9%A1%B5%E8%83%8C%E6%99%AF%EF%BC%8D%E5%88%98%E6%80%9D%E5%BD%A4.jpg)">

            </span>

            <span  class="jd" style="background-image:url(http://img.blog.163.com/photo/MOoHtw9mTxHf8dI57QL4yw==/5663276531418682069.jpg)">

            </span>

        </div>

    </div>

</body>

</html>

　　

图片占位 css的更多相关文章

  1. Unsplash.it - 实用的图片占位符，支持个性化设置

    Unsplash.it 是一个使用漂亮的图像作为占位符的工具.只要把你的图像尺寸(宽与高)放到网址后面的参数中,你会得到一个占位符.你可以很容易地得到一个随机图像或者是一个模糊图像.也支持获取灰度图像 ...

  2. 用javascript预加载图片、css、js的方法研究

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...

  3. wp加载本地HTML（附带图片，CSS，JS）

    wp加载本地HTML(附带图片,CSS,JS) Windows Phone:Load Local HTML with Img,Css,Js by 唐小崇 http://www.cnblogs.com/ ...

  4. django开发项目实例2--如何链接图片和css文件（静态文件）

    在上一篇随笔里面,我们已经介绍了如何从零开始用django建立一个项目并且初步运行以来了, 现在我们就要开始写我们的html了,也就是django里面的模板了,不过这节我们只讲如何链接图片和css(静 ...

  5. PS图片转CSS+HTML页面的正确步骤

    转载来源:https://www.cnblogs.com/gg_lihui/p/3396409.html 制作网页标准的流程是:拿到网站美工制作的psd效果图后,网页设计师再把PS制作的图片转html ...

  6. 背景图片与 CSS的那些事

    在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:ba ...

  7. 判断脚本，图片，CSS，iframe等是否加载完成

    1.图片 <img id="MyImg" src="src"/>jquery实现:$("#MyImg").load(functi ...

  8. 图片的css自适应

    当需要css来缩放图片的时候,可以采用外层容器100%或者任意百分比, 内层图片img tag 没有宽高,用sass写经过断点后的mixin中的样式就是这样: .workscon_section{ w ...

  9. 预加载（图片，css ,js）

    图片预加载 new Image().src = 'http://img1.t.sinajs.cn/t35/skin/skin_008/skin.css'; //新浪(4) 非ie下预加载(js,css ...

随机推荐

  1. 在Android中建立Android project没有R.java文件

    最近在搞一下安卓,在新建Android工程,既然发现在gen目录下没有R.java这个文件.我当时感到很郁闷,上次建Android工程才好好的,怎么这次既然报错没有R.java.后来我用以下才解决了. ...

  2. Linux shell中的一个问题 ${}带正则匹配的表达式

    目前在准备龙芯项目的PMON,在研究其编译过程的时候,看到一些make 语句,百思不得其解.后来在shell编程中看到一点资料,牵扯到Shell中的正则表达式.故记录下来,以备后来查阅. 问题: 在某 ...

  3. apache 限制指定user_agent

    有些user_agent 不是我们想要的,可以通过rewrite功能针对 %{HTTP_USER_AGENT} 来rewirete到404页,从而达到限制某些user_agent的请求.   配置如下 ...

  4. mysql 5.6

    mysql 5.6的安裝: 1,提前安装依赖的库环境. yum install -y  make bison cmake gcc-c++ ncurses ncurses-devel  git 2,下载 ...

  5. Java学习——继承

    将学生工人的共性描述提取出来,单独进行描述,只要让学生和工人与单独描述的这个类有关系,就可以了. 继承:1,提高了代码的复用性.2,让类与类之间产生了关系.有了这个关系,才有了多态的特性. 注意:千万 ...

  6. <转>maven发布第三方jar的一些问题

    在创建maven中私有仓库过程中,需要发布一些第三方jar到nexus仓库,使用命令的是 deploy:deploy-file 有许多参数,具体可查看 http://maven.apache.org/ ...

  7. OC准备知识

    #import 与 #include区别 include完成头文件的导入,可能会导致头文件的相互引用和函数或变量的重复定义 为了解决这个问题 我们必须这样做 #ifndef Student_h #de ...

  8. mapkit定位以及俯视视图

    1.导入框架MapKit.framework,CoreGraphics.framework

  9. ANCS协议翻译

    综述 苹果通知中心(Apple Notification Center Service, ANCS)的目的是提供给蓝牙外设一种简单.方便的获取ios设备通知信息的方式. 依赖 ANCS的使用没有依赖, ...

  10. 2013腾讯编程马拉松初赛第〇场（3月20日）湫湫系列故事——植树节 HDOJ 4503

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4503 思路:hint from a GOD-COW. 将每一个人模拟成图的一个点,两点连线当且仅当两人是朋 ...