欢迎访问:我爱bear - 你可记得 三月初 初相遇雨橙 我曾忆起 初春时 时景逢雨萱
  
你现在的位置: 首页 脚本样式 正文
图片根据父级自适应缩放水平或者垂直居中显示

在设计网页的时候,经常会遇到图片处理问题,当把图片设置成跟父级一样宽、高参数之后,你会发现图片会不同程度的拉伸变形,除非图片的尺寸刚好和父级一样,但是怎么可能全部一样呢?所以下面的方法就是解决这个问题的,图片自适应父级,根据父级自动调整图片进行缩放,缩放之后水平、或者垂子居中显示,个人业余写的,不专业,但是貌似效果还可以:

设置Style样式:设置父级宽、高,超出之后隐藏

<style type="text/css">
    .aaa{color: #CC3739; width: 200px; height: 145px; overflow: hidden;}
</style>

Html代码如下:

<body>
    <p class="aaa">
        <img src="img/1.jpg">
        <img src="img/2.jpg">
        <img src="img/3.jpg">
    </p>
</body>

Javascript代码如下:

function SetWidthAndHeight(PLWidth, PLHeight, imgID){
    //遍历每一个“imgID”
    $(imgID).each(function(){
        /* 图片父级宽、高;也就是图片缩放之后参考数 */
        var w1 = PLWidth;
        var h1 = PLHeight;
        
        /* 获取图片的实际宽、高 */
        var w2 = $(this).width();
        var h2 = $(this).height();
        
        /* 根据比较父级与图片的宽、高比例,确定按照宽或者高进行缩放 */
        if((w1/h1) < (w2/h2))
        {
            /* 按照父级高度缩放 及 图片高度等于父级高度 */
            /* 得到图片缩放之后的新宽度 */
            var neww2 = w2 - (((h2 - h1) / h2) * w2);
            /* 得到图片需要向左位移的距离 */
            var marginPX = -(neww2 - w1) / 2 + 'px';
            $(this).css({"margin-left":marginPX, "height":h1});
        }
        else
        {
            /* 按照父级宽度缩放 */
            /* 得到图片缩放之后的新高度 */
            var newh2 = h2 - (((w2 - w1) / w2) * h2);
            /* 得到图片需要向上位移的距离 */
            var marginPX = -(newh2 - h1) / 2 + 'px';
            $(this).css({"margin-top":marginPX, "width":w1});
        }
    })
}

调用代码: 

<script type="text/javascript" language="javascript">
    /* 参数1:父级宽度;参数2:父级高度;参数3:需要缩放的图片定位 */
    SetWidthAndHeight(200, 145, ".aaa img")
</script>

忘了一句,好像需要引入jquery哟。。。

发布日期:2017年12月13日 21:16:17     所属分类:脚本样式
版权声明:本文创建于 2 年 前,由 烟敛寒叶 发表,共 3936 字
转载请注明:图片根据父级自适应缩放水平或者垂直居中显示 (PS:如果是原创,哈哈。。。)
 
 
 
  
目前浏览:3013     暂无评论
该文章还没有评论,赶快抢占沙发吧!

  
网站简介
Z-blog 爱好者,个人博客粉丝,鼓捣主题制作,然而并不懂什么代码,乱乱唱。
本站建于 2010-04-26 已有 10 年
  • 文章总数:72
  • 页面总数:2
  • 分类总数:9
  • 标签总数:1
  • 评论总数:14
  • 浏览总数:203762
关于博客
5ibear 个人博客纯属个人娱乐博客,主要涵盖了天文地理、奇门遁甲、阴阳五行八卦及一切关乎于宇宙和平的 * *。博客“宗旨”:把个人制作累积的东东,分享给最需要的读者,“专研”主题制作,然而并不懂什么代码。乱乱唱,唱我们的歌,风在大,我们都在这儿。。。。
Copyright © 2016-2017 我爱bear 保留所有权利 基于 Z-blog 技术创建 Theme by 烟敛寒叶 渝ICP备10202287号-2
(若本站无意侵犯了您的版权,请邮件致 2679899860@qq.com 处理,谢谢!)
渝公网安备 50022502000121 号
歌曲 - 歌手
0:00