立即注册 登录
81路工程师大巴 - 81Lu.Net 返回首页

IT宝宝的个人主页 http://www.81lu.net/?18 [收藏] [复制] [RSS]

博客

javascript自适应图片宽和高(自适应图片比例,无绝对尺寸)

已有 173 次阅读2017-5-9 12:32 |个人分类:PHP|系统分类:Web前端| javascript, 图片

javascript自适应图片宽和高(自适应图片比例,无绝对尺寸)

兼容所有浏览器

下面只写一下思路和我自己的测试代码

<div class="" style="" id="id">
循环开始
    <div class="">
        <a><img scr="" ></a>
    </div>
    <div>其他内容</div>
循环结束
</div>
目的是要改变图片的宽高比例,

思路:先获取循环内的第一个div的宽高,

然后获取循环内第一个div下的img的宽高,让循环内的第一个div的宽高-某值,就等于图片的宽高了。



这个方法是根据页面的宽高,获取div的宽高,在设置img的宽高。

如果想用瀑布流的方法的话,那就去搜索Masonry.js。我这里用的是田字格自适应。

<script type="text/javascript">
window.onload=function(){ 
var div_height = document.getElementById("id");
for(var i = 0; i < div_height .getElementsByTagName('img').length; i++){
var imgStyle =  div_height .getElementsByTagName('img')[i];
imgStyle.style.height = (div_height .getElementsByTagName('div')[0].offsetHeight-111)+"px";
imgStyle.style.width = (div_height .getElementsByTagName('div')[0].offsetWidth-31)+"px";
}
}
</script>
如果想学习更多内容,请关注81路博客吧

路过

鸡蛋

鲜花

握手

雷人

全部作者的其他最新博客

评论 (0 个评论)

facelist

您需要登录后才可以评论 登录 | 立即注册

手机版|小黑屋|81路工程师大巴 - 81Lu.Net ( 豫ICP备15009715号 )

GMT+8, 2017-11-21 15:57

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部