怎样让网页图片高度自适应宽度_html-js-css

概述你肯定知道width百分比可以实现图片宽度的自适应，那么你知道高度也可以根据宽度变话而自适应比变化么，看下本文就了解了！

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

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

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

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

<!DOCTYPE HTML>

<head>

<Title>图片高度自适应demo</Title>

*{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 >

<p>图片高度自适应demo</p>

<ul>

</ul>

</div>

</body>

</HTML>

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

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

//元素高度自适应宽度

$(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>

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

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

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

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的怎样让网页图片高度自适应宽度全部内容，希望文章能够帮你解决怎样让网页图片高度自适应宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1092976.html

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

发表评论

评论列表（0条）