PHP技术,网站开发,PHP,PHP学习,Python学习,PHP开发,人工智能,大数据服务

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

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

此文被围观1650日期: 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/

© Copyright 2011-2019 adophper.com. All Rights Reserved.
读图网科技 版权所有。蜀ICP备12031064号