让图片适应div大小
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让图片适应div大小相关的知识，希望对你有一定的参考价值。
div 的宽高都是固定的，获取的图片的大小不固定，怎样使图片的大小自适应div的大小？
不能用overflow:hidden，这样就把图片切了，有没有更好的办法
和父对象对比的时候，width和height分开对比，当width和父对象相同的时候，并且height小于等于父对象，只设置width就够了，这样进行的缩放，就是原比例缩放，不然会拉伸失真的，相反，当height和父对象相同的时候，并且width小于等于父对象，只设置height就够了
以上是客户端处理方法，图片如果太大太多的话，对服务器压力比较大，另一种方法就是在用户上传的时候，编写图片程序，进行判断，手动把图片缩小到指定大小，判断方法类似上边那一段，但是你设置width的时候，需要手动计算一下height，因为自己编写的程序，是不会自动保持比例的 参考技术A 既然图片是动态获取的那么，在获取到它的时候就可以获取他的宽和高，还可以算出它的宽高比，div的宽高 你是知道的，当图片的宽高比大于div的宽高比时，按宽度来缩放，反之则按高度缩放 参考技术B div imgwidth:xxxpx这样就OK 去掉图片原有的widht 跟height 参考技术C 把图片缩小追问
图片是由用户上传的，如何缩小？
如何控制div自动适应屏幕大小
比如：
有3个div qwe1宽为200px(居左);qwe2宽为200px(居右);qwe3在两个div中间宽度随浏览器的放大缩小而自动改变
<div class="qwe1"></div>
<div class="qwe3"></div>
<div class="qwe2"></div>
不要小看这个问题 其实还是有点难度的
.qwe1width:200px;float:left;border:1px solid green
.qwe3
.qwe2width:200px;float:right;border:1px solid red
</style>
<div class="qwe1"></div>
<div class="qwe3"></div>
<div class="qwe2"></div>追问
抱歉，你的方法是不可行的。。。。。
qwe3的样式还是没弄 这样qwe3无法自动改变大小 而且qwe3一旦写了东西 还会改变qwe2的样式
<style>
bodymargin:0px;padding:0px;
.qwe1width:200px;height:5px;border:1px solid;float:left;
.qwe2width:100%;height:5px;border:1px solid;
.qwe3width:200px;height:5px;border:1px solid;float:right;
</style>
<div class="qwe1"></div>
<div class="qwe3"></div>
<div class="qwe2"></div>
</body>追问
这样的话 qwe2的宽会撑满整个html 不能达到我要的效果 我是要让它夹在2个div中间 能自动适应
追答就是啊，你什么浏览器啊，你用360的直接复制就可以，虽说有点缝隙，你看看那个兼容性，就可以解决！火狐完全没问题啊
追问你把每个div 加个padding:1px padding:2px padding:3px;就可以看出区别了 不是我要的那个效果
因为边框都和起来了所以你没发现
.qwe1width:200px;height:5px;border:1px solid;float:left; padding:1px
.qwe2width:100%;height:5px;border:1px solid; padding:2px;
.qwe3width:200px;height:5px;border:1px solid;float:right; padding:3px;
如果你就只用样式的话，难度还挺大的。追问
求教。。。。。
追答
1
3
2
不过，如果浏览器窗口宽度太小的话（小于400+中间那个div内容的宽度？），两边的td的宽度也就不够200了。
谢谢了 我要的效果是有了 可是这只是我要的框架 里面还要放很多东西 我估计会出问题
总之谢谢了 我试着做一下
position:relative;
.qwe1
float:left;
width:200px;
background:#F00;
.qwe2
width:200px;
float:right;
background:#0F0;
.qwe3
position:absolute;
background:#00F;
top:0;
left:200px;
right:200px;
追问
很好的解决了我的问题 但是又出现个问题就是ie6中间那块不好
本回答被提问者采纳以上是关于让图片适应div大小的主要内容，如果未能解决你的问题，请参考以下文章