!
也想出现在这里? 联系我们
广告位

怎样让网页图片高度自适应宽度

你肯定知道 width 百分比可以实现图片宽度的自适应,那么你知道高度也可以根据宽度变话而自适应比变化么,看下本文就了解了!当前响应式布局,内容尺寸自适应设备是众多网站开发者的选择,毕竟现在显示器、笔记本、移动设备的尺寸太过于繁多了,其中大家都知道使用 width="100%"样式可以实现元素的自适应宽度,但是让元素的高度根据宽度变化而变化却并不能直接通过 css 简单实现。下面咱们举个栗子...

比如,我在布局的时候想要实现一个横向排列的图片效果,要求是图片能够根据屏幕的大小自动调整,以四张图片为例,我们很简单的就能实现,直接给让图片所在的元素宽度为 25%就可以了啊。但是如果图片的宽高比例并不相同,那么就会出现下图的情况:四张图片的宽度是相同的,但是高度却参差不齐,视觉效果差。
怎样让网页图片高度自适应宽度
下面贴出 demo 代码,大家可以在本地调试。(代码中图片路径请自行修改)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>图片高度自适应demo</title>
  6. <style type="text/css">
  7. *{margin: 0; padding: 0; border: 0;}
  8. ul,ol,li{list-style: none;}
  9. .wrap{margin: 100px auto 0; width: 600px; padding: 10px; border: 1px dashed #3e3e3e; overflow: hidden;}
  10. .wrap p{font-size: 16px; font-weight: bold; text-align: center; height: 30px; line-height: 30px;}
  11. .wrap span{float: right; display: inline-block;}
  12. .wrap ul{overflow: hidden;}
  13. .wrap ul li{float: left; width: 23%; padding: 1%}
  14. .wrap ul li img{width: 100%;}
  15. </style>
  16. </head>
  17. <body>
  18. <div class="wrap">
  19. <p>图片高度自适应demo</p>
  20. <ul>
  21. <li><img src="1.jpg"></li>
  22. <li><img src="2.jpg"></li>
  23. <li><img src="3.jpg"></li>
  24. <li><img src="4.jpg"></li>
  25. </ul>
  26. <span>demo by yaxi.net</span>
  27. </div>
  28. </body>
  29. </html>

此时如果想让图片高度都保持一样,我们可以给图片自定义高度,但如果图片宽度变化了,高度是不会跟着变的,就会出现图片变形的情况。

那么这个时候就要解决图片高度的自适应问题了,由于当前浏览器都是从上而下浏览,页面高度随着内容的变化而变化,并不像宽度一样是固定的,使用百分百比的 height 显然不现实。这就需要请出来 js 大法了,将下例 js 代码放入 demo 中,刷新页面后整个页面变得整洁美观,强迫症们表示太棒了。

  1. <script type="text/javascript">
  2. //元素高度自适应宽度
  3. $(function(){
  4. var ratio = 0.8;/*此处是宽高比例*/
  5. var liWidth = $('.wrap ul li').width();/*括号中为父元素选择器*/
  6. var liHeight = liWidth * ratio;
  7. $('.wrap li img').width( liWidth );
  8. $('.wrap li img').height( liHeight );
  9. });
  10. </script>

查看元素后我们可以看出,此段 js 给图片增加了行内样式,所以此时如果再调整浏览器宽度,图片宽高并不会变化。需要注意的是,本例依托于 jquery 框架,所以需要在网页

里引入 jquery.js 文件。其中 ratio=0.8 是指你想要实现的图片宽高比例;liWidth 是图片父元素宽度,图片会自动适应此宽度,注意代码中元素选择器的填写。有些前端基础的朋友估计也懂了,此代码不仅适用于图片,所有的块状元素都可以通过此代码来实现宽高固定比例的,这样一来在自适应布局上就简单很多了。

本文代码兼容主流浏览器(包括 IE),需提前引入 jquery 文件,代码简洁却有大功能,可以说是响应式布局的一个神器了。

给TA打赏
共{{data.count}}人
人已打赏
前端学习

CSS 截取图片只显示部分图片

2024-7-29 14:29:49

前端学习

如何用CSS实现自适应宽高等比例的容器

2024-7-30 16:29:52

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索