当前位置:首页 > 人生常识 > 正文内容

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

彭淇3年前 (2017-10-05)人生常识30410

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

比如,我在布局的时候想要实现一个横向排列的图片效果,要求是图片能够根据屏幕的大小自动调整,以四张图片为例,我们很简单的就能实现,直接给让图片所在的元素宽度为25%就可以了啊。但是如果图片的宽高比例并不相同,那么就会出现下图的情况:四张图片的宽度是相同的,但是高度却参差不齐,视觉效果差。

怎样让网页图片高度自适应宽度  视觉差 图形 网页 电脑 第1张

下面贴出demo代码,大家可以在本地调试。(代码中图片路径请自行修改)



<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>图片高度自适应demo</title>
 <style type="text/css">
 *{margin: 0; padding: 0; border: 0;}
ul,ol,li{list-style: none;}
 .wrap{margin: 100px auto 0; width: 600px; padding: 10px; border: 1px dashed #3e3e3e; overflow: hidden;}
 .wrap p{font-size: 16px; font-weight: bold; text-align: center; height: 30px; line-height: 30px;}
 .wrap span{float: right; display: inline-block;}
 .wrap ul{overflow: hidden;}
 .wrap ul li{float: left; width: 23%; padding: 1%}
 .wrap ul li img{width: 100%;}
 </style>
</head>
<body>
 <div class="wrap">
 <p>图片高度自适应demo</p>
 <ul>
 <li><img src="1.jpg"></li>
 <li><img src="2.jpg"></li>
 <li><img src="3.jpg"></li>
 <li><img src="4.jpg"></li>
 </ul>
 <span>demo by pengqi.club</span>
 </div>
</body>
</html>	

	
	

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

就会出现图片变形的情况。

那么这个时候就要解决图片高度的自适应问题了,由于当前浏览器都是从上而下浏览,页面高度随着内容的变化而

变化,并不像宽度一样是固定的,使用百分百比的height显然不现实。这就需要请出来js大法了,将下例js代码放入demo中,刷新页面后整个页面变得整洁美观,强迫症们表示太棒了。

<script type="text/javascript">
 //元素高度自适应宽度
$(function(){
 var ratio = 0.8;/*此处是宽高比例*/
 var liWidth = $('.wrap ul li').width();/*括号中为父元素选择器*/
 var liHeight = liWidth * ratio;
$('.wrap li img').width( liWidth );
$('.wrap li img').height( liHeight );
 });
 </script>
怎样让网页图片高度自适应宽度  视觉差 图形 网页 电脑 第2张 
 
	

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

其中ratio=0.8是指你想要实现的图片宽高比例;liWidth是图片父元素宽度,图片会自动适应此宽度,注意代码中

元素选择器的填写。

有些前端基础的朋友估计也懂了,此代码不仅适用于图片,所有的块状元素都可以通过此代码来实现宽高固定比例

的,这样一来在自适应布局上就简单很多了。

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

神器了。



扫描二维码至手机访问

扫描二维码推送至手机端访问。

版权声明:本文由淇云博客发布,如需转载请注明出处。

转载请注明出处:https://www.pengqi.club/blog/136.html

分享给朋友:

相关文章

如何建立个人博客?

如何建立个人博客?

如何建立个人博客? 想必很多人都想建立一个,属于自己的个人博客,把自己的一些学习的经验和经历,通过互联网的形式来分享给别人。通过分享与网友进行互动,让更多的人了解和认识你,并且树立自己在...

2017年下半年网络工程师上午和下午真题及答案解析

2017年下半年网络工程师上午和下午真题及答案解析

对于想从事网络方面的工作,网络工程师证应该是必不可少的,下面是2017年下半年网络工程师上午和下午真题及答案解析,感觉难度比较大呢,希望对有用的人有所帮助吧! 2017年下半年网络工程师下午真题及答案...

初级网络工程师或网络管理员TOP 100问答

初级网络工程师或网络管理员TOP 100问答

1)什么是链接?链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。2)OSI参考模型的层次是什么?有7个OSI层:物理层,数据链路层,网络层,传输层,会话层,表示层和...

全平台通用评论神器一键自动填写昵称、邮箱和网址

全平台通用评论神器一键自动填写昵称、邮箱和网址

我们在访问网站时,看到一篇文章,想发表评论时,是否经常要在评论框里手动填写自己的昵称、E-mail 和网址等留言评论信息?重复的打字会让我们感到很乏味。为了解决这个问题,我在网上搜索相关资料,找到了很...

阿里云linux一键安装web环境1.5.5原版下载

阿里云linux一键安装web环境1.5.5原版下载

以前这个环境安装包是免费的,现在居然开始收费了,一次2元,虽然不贵,但还是让我心存芥蒂,为了让大家省钱,让商家赚不到钱,我把它分享给大家。视频教程:点击此处安装及网站部署文档下载链接:一键安装包全攻略...

小腿抽筋是怎么回事?教你三招快速缓解!

小腿抽筋是怎么回事?教你三招快速缓解!

相信大部分人都经历过腿抽筋的痛苦,虽然说腿抽筋每次只是短短的数分钟,但是频繁的抽筋实在令人烦恼!那么腿抽筋到底是什么引起的呢?那怎样才能缓解呢?什么是腿抽筋?抽筋的学名叫肌肉痉挛,是一种肌肉自发的强直...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。