求html中img标签src属性引进的图片(非背景) 怎么样 才能适应不同的分辨率

[G-DarsLng]

在论坛和百度翻了一天...看到的都是对背景图片的操作.一点关于普通图片的都木有.
求助大神们.怎么才能让img标签src引进的图片 在不同的分辨率下 看到的图片大小可以变 比例不变.

[kittaaron]

<img/>标签的显示是根据它的width和height来显示宽高的，没定义的话就是图片本身的宽度和高度。不能自动做到根据分辨率调整大小，如果一定要，就把分辨率读出来，用javascript去改<img/>的宽高吧

[G-DarsLng]

引用 1 楼 kittaaron 的回复:

<img/>标签的显示是根据它的width和height来显示宽高的，没定义的话就是图片本身的宽度和高度。不能自动做到根据分辨率调整大小，如果一定要，就把分辨率读出来，用javascript去改<img/>的宽高吧

嗯.我想要问的就是 如何根据脚本获取到的屏幕大小 而设置图片的width和height 是设置具体的值 还是 百分比呢.根据什么来判断设置值或者百分比的大小呢?

[kittaaron]

引用 2 楼 GDarsLng 的回复:

[quote=引用 1 楼 kittaaron 的回复:] <img/>标签的显示是根据它的width和height来显示宽高的，没定义的话就是图片本身的宽度和高度。不能自动做到根据分辨率调整大小，如果一定要，就把分辨率读出来，用javascript去改<img/>的宽高吧

嗯.我想要问的就是 如何根据脚本获取到的屏幕大小 而设置图片的width和height 是设置具体的值 还是 百分比呢.根据什么来判断设置值或者百分比的大小呢?[/quote] window.screen.height window.screen.width javascript获取屏幕分辨率，这是个比较常见的问题，百度就很容易找到

[如是我闻2012]

<style>
#bodybg { 
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 0;
}
#bodybg .stretch { width:100%;height:100%;} 
</style>

<!--/背景拉伸-->
<div id="bodybg">
  <img src=/img/bg.jpg class="stretch" />
</div>
<!--背景拉伸/-->

[qufujun]

引用 14 楼 crab890715 的回复:

这个resize事件就是当window改变大小的情况会重新计算高宽，他们说的屏幕宽度高度其实最终都是window的高宽，我不晓得你具体要实现什么样的效果，你如果是想让图片的大小随着窗口的大小改变而改变的话就是用resize这种方法就可以实现了。

你这个还是背景图片的自适应...背景图片的我会...我问的是 网页中的普通的<img>图片 在不同分辨率下不改变图片宽高比例只变大小- -

[螃蟹哥哥]

引用 15 楼 qufujun 的回复:

[quote=引用 14 楼 crab890715 的回复:] 这个resize事件就是当window改变大小的情况会重新计算高宽，他们说的屏幕宽度高度其实最终都是window的高宽，我不晓得你具体要实现什么样的效果，你如果是想让图片的大小随着窗口的大小改变而改变的话就是用resize这种方法就可以实现了。

你这个还是背景图片的自适应...背景图片的我会...我问的是 网页中的普通的<img>图片 在不同分辨率下不改变图片宽高比例只变大小- -[/quote] 那要看img可以设置大小不撒，可以设置那还不是一样在这个事件里面修改

[xxjxxmxhlr]

引用 15 楼 qufujun 的回复:

你这个还是背景图片的自适应...背景图片的我会...我问的是 网页中的普通的<img>图片 在不同分辨率下不改变图片宽高比例只变大小- -

举个例子吧，比如你现在有个100*50的图片，你想让它在各个分辨率上显示的比例都是2：1那么你直接把图片的宽度和高度比写成2：1的单位px的那么他的比例就不会变，如果你纠结于让它同比例放大那你可以这样： JS代码： var yourscreenwidth=window.screen.width； var yourpng=yourscreenwidth/100(图片的原始宽度); document.getElementbyid("yourpng").width=yourscreenwidth; document.getElementbyid("yourpng").height=yourpng*50(图片的原始高度); 当然如果你不想用这种在加载前就知道宽跟高的图片而是未知图片，你也可以在js里获取图片的原始高度与宽度然后按照上面的方法重新写一下图片应该显示的宽跟高就OK了，获取方式为naturalHeight，naturalWidth属性 这样够详细了吧楼主

[天生骄傲]

body.backage{margin-top:0px;background-size:100% 100%;background-image:url(路径);}根据大小自动拉伸图片，保证填满ok？ 把body的class设成这个即可

[jsonny]

这个你应该自己指定一个标准，打个比方你在分辨率为800*600的情况下，你的图片最初的大小为80*60是正确的。这样你就可以根据比例来算的图片的大小了。 function setPicSize(){ var screenWidth=window.screen.width; var flag=screenWidth/600; var picWidth=flag*60; var picHeight=flag*80; document.getElementById("你的img标签的ID").style.width=picWidth; document.getElementById("你的img标签的ID").style.height=picHeight; }

[G-DarsLng]

引用 3 楼 kittaaron 的回复:

[quote=引用 2 楼 GDarsLng 的回复:] [quote=引用 1 楼 kittaaron 的回复:] <img/>标签的显示是根据它的width和height来显示宽高的，没定义的话就是图片本身的宽度和高度。不能自动做到根据分辨率调整大小，如果一定要，就把分辨率读出来，用javascript去改<img/>的宽高吧

嗯.我想要问的就是 如何根据脚本获取到的屏幕大小 而设置图片的width和height 是设置具体的值 还是 百分比呢.根据什么来判断设置值或者百分比的大小呢?[/quote] window.screen.height window.screen.width javascript获取屏幕分辨率，这是个比较常见的问题，百度就很容易找到[/quote] 额- -可能是我没表达明白.获取屏幕分辨率我会...我是想问 根据获取到的分辨率 根据什么依据来设置图片的大小

[G-DarsLng]

引用 4 楼 lishunwen0825 的回复:

<style>
#bodybg { 
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 0;
}
#bodybg .stretch { width:100%;height:100%;} 
</style>

<!--/背景拉伸-->
<div id="bodybg">
  <img src=/img/bg.jpg class="stretch" />
</div>
<!--背景拉伸/-->

大神...标题说了 不是背景..背景的我会了...是普通的图片

[螃蟹哥哥]

在onload事件里面处理就OK了： <img id="bodybg" src=/img/bg.jpg class="stretch" /> window.onload = function(){ $("#bodybg").css({height:$(window).height(),width:$(window).width()}); }

[qufujun]

引用 7 楼 crab890715 的回复:

在onload事件里面处理就OK了： <img id="bodybg" src=/img/bg.jpg class="stretch" /> window.onload = function(){ $("#bodybg").css({height:$(window).height(),width:$(window).width()}); }

在公司 QQ号关联登录不了...不是背景图片- -

[xxjxxmxhlr]

用js计算啊，获取当前屏幕宽度与高度和图片dom对象，然后在安比例修改width、height属性

[Acesidonu]

js动态修改

[螃蟹哥哥]

引用 8 楼 qufujun 的回复:

[quote=引用 7 楼 crab890715 的回复:] 在onload事件里面处理就OK了： <img id="bodybg" src=/img/bg.jpg class="stretch" /> window.onload = function(){ $("#bodybg").css({height:$(window).height(),width:$(window).width()}); }

在公司 QQ号关联登录不了...不是背景图片- -[/quote] 什么意思没看懂

[xxjxxmxhlr]

引用 11 楼 crab890715 的回复:

[quote=引用 8 楼 qufujun 的回复:] [quote=引用 7 楼 crab890715 的回复:] 在onload事件里面处理就OK了： <img id="bodybg" src=/img/bg.jpg class="stretch" /> window.onload = function(){ $("#bodybg").css({height:$(window).height(),width:$(window).width()}); }

在公司 QQ号关联登录不了...不是背景图片- -[/quote] 什么意思没看懂[/quote] 它的写法是让你的dom对象在页面加载时候自动调用一个js然后这个js的内容就是id为bodybg的元素的高为窗口的高度，宽度亦然是窗口的高度，应该是用来JQuery吧，要用他的代码需要引入Jquery，不过这并不能满足你的要求这样图片比例就会变成窗口的比例了，还是安我们说的获取当前屏幕宽度与高度和图片dom对象，然后在安比例修改width、height属性

[螃蟹哥哥]

我错了，写错了，在resize里面，不是onload里面处理 $(window).resize(function(){ $("#bodybg").css({height:$(window).height(),width:$(window).width()}); } });这样就OK了，用惯了jquery，不大喜欢用dom编程，抱歉。。。。

[螃蟹哥哥]

这个resize事件就是当window改变大小的情况会重新计算高宽，他们说的屏幕宽度高度其实最终都是window的高宽，我不晓得你具体要实现什么样的效果，你如果是想让图片的大小随着窗口的大小改变而改变的话就是用resize这种方法就可以实现了。