js或css怎么图片随屏幕分辨率等比例缩放
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js或css怎么图片随屏幕分辨率等比例缩放相关的知识，希望对你有一定的参考价值。
<html><head>
<style>
html,bodywidth:100%;height:100%;margin:auto 0px;padding:auto 0px;text-align:center;
.imgBox, .imgBox imgwidth:100%;height:100%;
</style>
</head>
<body>
<div class="imgBox">
<img src="1.jpg" />
</div>
</body>
</html>
如上代码可以实现，把图片换一下就OK了，希望可以帮到你。
$("#container").css("width":window.screen.width,"height":window.screen.height);
$(window).resize(function()
fullScreen();
);
fullScreen();本回答被提问者和网友采纳
小技巧之padding-bottom实现等比例图片缩放
1、padding-bottom 如果用%来表示的话，计算是根据父元素的width的值进行计算的。
例：父元素.wrapper的width是100px，height设置为0, padding-bottom的值是50%，则该元素的高是50px
2、 百分比方法适用于的场景：一个图片需要全部显示出来，而且图片本身的宽高比例不变，能够随着屏幕的大小进行变化。
3、实现等比缩放的效果，还可以通过vw来设置，缺点：有的浏览器不支持。
下面是例子中css.wrapper中可以替换为
.wrapper{
width: 100%;
height: 26.66vw;
}
下面例子可以通过屏幕的缩放来等比的改变图片的宽高。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>padding-bottom</title> 6 <style type="text/css" rel="stylesheet"> 7 .wrapper{ 8 width: 100%; 9 height: 0; 10 /*padding-bottom的值是基于父元素的width来计算的,则padding-bottom=100%/3.75=26.66% */ 11 padding-bottom: 26.66%; 12 overflow: hidden; 13 } 14 .content{ 15 position: relative; 16 width: 100%; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="wrapper"> 22 <!-- 子元素的图片的宽为375px,高为100px,则算出来的宽高比为375/100=3.75 --> 23 <img class="content" src="http://img1.qunarzz.com/piao/fusion/1806/1c/4847ea66072c7b02.jpg_750x200_c32457fb.jpg" alt="图片"> 24 </div> 25 </body> 26 </html>
以上是关于js或css怎么图片随屏幕分辨率等比例缩放的主要内容，如果未能解决你的问题，请参考以下文章
理解CSS3中的background－size(对响应性图片等比例缩放)