让图片适应div大小

发布网友发布时间：2022-05-10 09:22

共4个回答

热心网友时间：2024-02-05 14:14

先给div定义overflow:hidden样式，不是为了剪裁图片，只是为了页面加载的时候，图片不会把div撑开，让页面布局被破坏，然后给所有需要自适应的图片，定义一个相同的name属性，然后在页面onload事件，或者页面最后调用一个脚本，获取全部name属性为你定义的图片，然后循环遍历这些图片，和图片的父对象，然后给图片的width，height属性进行值定义，就OK了

和父对象对比的时候，width和height分开对比，当width和父对象相同的时候，并且height小于等于父对象，只设置width就够了，这样进行的缩放，就是原比例缩放，不然会拉伸失真的，相反，当height和父对象相同的时候，并且width小于等于父对象，只设置height就够了

以上是客户端处理方法，图片如果太大太多的话，对服务器压力比较大，另一种方法就是在用户上传的时候，编写图片程序，进行判断，手动把图片缩小到指定大小，判断方法类似上边那一段，但是你设置width的时候，需要手动计算一下height，因为自己编写的程序，是不会自动保持比例的

热心网友时间：2024-02-05 14:15

既然图片是动态获取的那么，在获取到它的时候就可以获取他的宽和高，还可以算出它的宽高比，div的宽高你是知道的，当图片的宽高比大于div的宽高比时，按宽度来缩放，反之则按高度缩放

热心网友时间：2024-02-05 14:15

div img{width:xxxpx}这样就OK 去掉图片原有的widht 跟height

热心网友时间：2024-02-05 14:16

把图片缩小追问图片是由用户上传的，如何缩小？