PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » css保持图片自适就与图片比例

css保持图片自适就与图片比例

此文被围观1015日期: 2016-03-02 分类 : 前端设计  标签:  ···

页面即要保持响应式的结构又要保持图片的某全比例不变,解决方法:


html代码:

<div class="img-responsive">

    <img src="http://d13yacurqjgara.cloudfront.net/users/14765/screenshots/1392915/mrbc-badge-....png"

    />

</div>


css代码:

.img-responsive {

    max-width: 100%;

    height: 0;

    padding-bottom: 60%;

    background-color:#ff0000;

    overflow: hidden;

}


.img-responsive img {

    width: 100%;

}



http://jsfiddle.net/luin/3g5AZ/

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2017adophper.com All Rights Reserved.