下次自动登录
现在的位置:
& 综合 & 正文
Android实现图片宽度100%ImageView宽度且高度按比例自动伸缩
在ListView中为了实现图片宽度100%适应ImageView容器宽度，让高度自动按比例伸缩功能，查了很多资料，搞了一下午都没找出个现成的办法，不过貌似有个结论了，就是：
Android自身不能实现这样的效果，只有自己动手丰衣足食
ImageView 中有个 scaleType 属性，设置图片在 view 中的缩放方式，本来以为 fit_center 可以实现，结果很无语，莫名其妙，没能实现宽度贴合容器宽度，两侧都是空白区域。
解决方法：
还是要利用 scaleType 的
center_crop 效果，让图片能始终按比例填充容器，不留空白区域。
剩下最主要的功能就是动态设置 ImageView 容器的高度了，这样让图片能尽可能的完整展现出来，而且还可以实现 maxHeight 的效果，如果图片高度比例过大不至于把列表拉的太长。
int maxHeight = ZUI.dp2px(mContext, 300);
int height = (int) ((float) view.getWidth()/drawable.getMinimumWidth() * drawable.getMinimumHeight());
if (height & maxHeight) height = maxH
view.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, height));
其中 view 即 ImageView 图片视图容器对象，drawable 就是要显示的图片资源。
drawable.getMinimumWidth()
和 drawable.getMinimumHeight() 是获取图片在屏幕上的可视高度宽度，不一定是图片的原始高宽度，跟屏幕的像素密度有关，大概就是这样子的吧。注意要用浮点数值类型，不然可能取整变成 1 的倍数了。
将 dp 值转为像素值，因为 java 中操作的高宽都是像素值，而样式中都是用 dip 来兼容屏幕的
public static int dp2px(Context context, int dp)
float scale = context.getResources().getDisplayMetrics().
return (int) (dp * scale + 0.5f);
ok 大概就是这样搞定了，顺便弄个测试结果图
其实 center_crop
可以简单的实现该功能的，但是他不会自动扩展高度，他应该用的是图片的可视高度为容器高度然后再进行容器覆盖显示，也就是说容器高度不会按比例增大，导致图片几乎只显示一半不到的样子，如果图片比较小，那几乎没办法用了，还是必须要动态调整，如果图片尺寸比较大，特别是高度合适的话就可以直接用的
&&&&推荐文章:
【上篇】【下篇】css使图片自动适应div的宽度变化大小_错新网
当前位置： →
→ css使图片自动适应div的宽度变化大小
css使图片自动适应div的宽度变化大小
定义IMGimg {width:expression(document.body.clientWidth&600?&600px&:&auto&); max-width:600} //ie6/7img {max-width:600} //ff解决了最大宽度的问题
本文引用网址：
在下列搜索引擎中搜索“css使图片自动适应div的宽度变化大小”的相关信息：
你可能还喜欢以下文章
?上一篇文章：
?下一篇文章：u???×?????? 1/4 AE??ó??u??°??u????°??,ù 3/4 ?? 1/4 AE??ó????×???????,ss???í??
×?????[ ] ?à????×??? ?± 1/4 ???
?ú????,????¤u?????:
?ó 1/4 ?,????¤u?????
12345678910
×? 1/2 ü,ü??u?????
???????ss???¤ 3/4 ss后使用快捷导航没有帐号？
只需一步，快速开始
查看: 4196|回复: 11
怎么才可以另图片随ＤＩＶ的宽度和高度自动缩放呢
UID251269在线时间 小时积分365帖子离线17045 天注册时间
中级会员, 积分 365, 距离下一级还需 135 积分
怎么才可以另图片随ＤＩＶ的宽度和高度自动缩放呢，前题，我的图片是数据库读取的．请问有人知道怎么实现吗？
UID57400在线时间 小时积分453帖子离线17045 天注册时间
中级会员, 积分 453, 距离下一级还需 47 积分
&img src=&xx.php& style=&width: 100%; height: 100%& /&
UID251269在线时间 小时积分365帖子离线17045 天注册时间
中级会员, 积分 365, 距离下一级还需 135 积分
要图片不失真！这种方法另图片一样失望，
UID219905在线时间 小时积分4105帖子离线17045 天注册时间
金牌会员, 积分 4105, 距离下一级还需 895 积分
只设置宽或者只设置高试试·
UID57400在线时间 小时积分453帖子离线17045 天注册时间
中级会员, 积分 453, 距离下一级还需 47 积分
原帖由 [i]XM20001 于
18:17 发表
要图片不失真！这种方法另图片一样失望，
10x10的图片,如果放大成100x100,能不失真么?
UID251269在线时间 小时积分365帖子离线17045 天注册时间
中级会员, 积分 365, 距离下一级还需 135 积分
我是说由大变小，请问能否实现呢？
UID116549在线时间 小时积分5801帖子离线17045 天注册时间
&title& test &/title&
background:#000000;
width:expression(body.clientWidth
-200 + &px&);
img{width:expression(body.clientWidth
&div id=&div1&&
&img src=&/Upload/Photos/0632.jpg& id=&divimg&&
&提示：您可以先修改部分代码再运行
UID198476在线时间 小时积分754帖子离线17045 天注册时间
高级会员, 积分 754, 距离下一级还需 246 积分
矢量图按比例缩放就不会失真了嘛
UID205483在线时间 小时积分78帖子离线17045 天注册时间
初级会员, 积分 78, 距离下一级还需 122 积分
我用到的方法：
var IE=
navigator.userAgent.indexOf(&MSIE&)&=0?IE=true:IE=false
/*新窗口打开图片*/
function openimg(imgobj){
& & & & imgobj.style.cursor=&pointer&;
& & & & var thesrc=imgobj.
& & & & if(IE){var f =new Function(&event&,&window.open('&+thesrc+&')&);imgobj.attachEvent(&onclick&,f);}
& & & & else{imgobj.setAttribute(&onclick&,&window.open('&+thesrc+&')&)}
& & & & }
/*重设图片大小*/
function ResizeImg(obj,theWidth,theHeight){
& & & & if(obj!=null){
& & & & & & & & var imglist=obj.getElementsByTagName(&img&);
& & & & & & & & if(imglist!=null){
& & & & & & & & & & & &
& & & & & & & & & & & & for(a=0;a&imglist.a++){
& & & & & & & & & & & & & & & & if(imglist[a].width&theWidth){
& & & & & & & & & & & & & & & & & & & & imglist[a].height=Math.round(imglist[a].height*(theWidth/imglist[a].width))
& & & & & & & & & & & & & & & & & & & & imglist[a].width=theW
& & & & & & & & & & & & & & & & & & & & openimg(imglist[a]);
& & & & & & & & & & & & & & & & }
& & & & & & & & & & & & & & & & if(imglist[a].height&theHeight){
& & & & & & & & & & & & & & & & & & & & imglist[a].width=Math.round(imglist[a].width*(theHeight/imglist[a].height))
& & & & & & & & & & & & & & & & & & & & imglist[a].height=theHeight
& & & & & & & & & & & & & & & & & & & & openimg(imglist[a]);
& & & & & & & & & & & & & & & & & & & & }
& & & & & & & & & & & & & & & & }
& & & & & & & & & & & & }
& & & & & & & & }
& & & & }
复制代码
此函数是用来重设一个对象内所有的图象大小，你也可单独取出针对单一图片进行设置
能实现等比例缩放,兼容FireFox
obj为一个对象比如一个DIV
theWidth为最大宽度
theHeight为最大高度
调用范例：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&&/title&
&div id=&testimg&&
&img src=&/attachments//5Mq7UtB.jpg& width=&653& height=&434&/&
&script type=&text/javascript&&
navigator.userAgent.indexOf(&MSIE&)&=0?IE=true:IE=false
/*新窗口打开图片*/
function openimg(imgobj){
imgobj.style.cursor=&pointer&;
var thesrc=imgobj.
if(IE){var f =new Function(&event&,&window.open('&+thesrc+&')&);imgobj.attachEvent(&onclick&,f);}
else{imgobj.setAttribute(&onclick&,&window.open('&+thesrc+&')&)}
/*重设图片大小*/
function ResizeImg(obj,theWidth,theHeight){
if(obj!=null){
var imglist=obj.getElementsByTagName(&img&);
if(imglist!=null){
for(a=0;a&imglist.a++){
if(imglist[a].width&theWidth){
imglist[a].height=Math.round(imglist[a].height*(theWidth/imglist[a].width))
imglist[a].width=theW
openimg(imglist[a]);
if(imglist[a].height&theHeight){
imglist[a].width=Math.round(imglist[a].width*(theHeight/imglist[a].height))
imglist[a].height=theHeight
openimg(imglist[a]);
ResizeImg(document.getElementById(&testimg&),300,400)
&提示：您可以先修改部分代码再运行
[[i] 本帖最后由 gzlingye 于
23:52 编辑 ]
本帖子中包含更多资源
才可以下载或查看，没有帐号？
UID321811在线时间 小时积分61帖子离线17045 天注册时间
初级会员, 积分 61, 距离下一级还需 139 积分
好东西，收藏先
UID202985在线时间 小时积分291帖子离线17045 天注册时间
中级会员, 积分 291, 距离下一级还需 209 积分
留个脚印，学习了。
UID202985在线时间 小时积分291帖子离线17045 天注册时间
中级会员, 积分 291, 距离下一级还需 209 积分
写个小程序自动生成缩略图就是了
用原图不推荐，除非是内容显示页
Powered byThe page is temporarily unavailable
nginx error!
The page you are looking for is temporarily unavailable.
Please try again later.
Website Administrator
Something has triggered an error on your
This is the default error page for
nginx that is distributed with
It is located
/usr/share/nginx/html/50x.html
You should customize this error page for your own
site or edit the error_page directive in
the nginx configuration file
/etc/nginx/nginx.conf.