求教,能让图片在div中自适应尺寸且居中显示(非常规)的高效代码

lyt_yj 2015-12-19 08:29:28
需求描述:
DIV 宽与高固定,img 宽与高均大于 DIV ,且 img 宽高比不确定
将 img 按一定规则等比缩小后显示在 DIV 中,且 DIV 内上下左右均没有留白,效果如下:

如果:
img 宽高比 > DIV 宽高比,则最终 img 高 = DIV 高,而 img 宽 > DIV 宽,
此时将 img 左、右各截取或隐藏相同【宽度】的内容,在 DIV 内显示 img【水平】最中间的部分

如果:
img 宽高比 < DIV 宽高比,则最终 img 宽 = DIV 宽,而 img 高 > DIV 高,
此时将 img 上、下各截取或隐藏相同【高度】的内容,在 DIV 内显示 img【垂直】最中间的部分

网页中有多处容器用到该功能,且容器宽高均不相同,要求程序执行效率高。
我们的网站程序是PHP,之前用PHP自带的 getimagesize 函数判断图片尺寸,效率太低,导致网页打开太慢。
不知道是否可以用 CSS 、JS 或 jquery 实现。

请高手不吝赐教!拜谢!
...全文
471 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
KK3K2005 2015-12-21
  • 打赏
  • 举报
回复
图片尺寸应该在前端 后台只要吧图片输出(如果后台要判断大小 应该在数据库中预先保存图片大小) 前端用js来判断图片大小 <img src='xxxx' onload='myload(this)'> function onload(img){ //图片加载的回调 var width = $(img).width(); }
lyt_yj 2015-12-20
  • 打赏
  • 举报
回复
引用 1 楼 KK3K2005 的回复:
[quote=引用 楼主 lyt_yj 的回复:] 如果: img 宽高比 > DIV 宽高比,则最终 img 高 = DIV 高,而 img 宽 > DIV 宽, 此时将 img 左、右各截取或隐藏相同【宽度】的内容,在 DIV 内显示 img【水平】最中间的部分 如果: img 宽高比 < DIV 宽高比,则最终 img 宽 = DIV 宽,而 img 高 > DIV 高, 此时将 img 上、下各截取或隐藏相同【高度】的内容,在 DIV 内显示 img【垂直】最中间的部分 请高手不吝赐教!拜谢!
if(img 宽高比 > DIV 宽高比) 则最终 img 高 = DIV 高, if(img 宽 > DIV 宽) 则img【水平】剧中 你的话直接就翻成代码了 相信自己 [/quote] 关键是我不知道获取图片的尺寸该怎么写,比如JS 我之前用的PHP 的getimagesize 函数是实现了,但是效率太低了,网页打开速度超级慢
KK3K2005 2015-12-20
  • 打赏
  • 举报
回复
引用 楼主 lyt_yj 的回复:
如果: img 宽高比 > DIV 宽高比,则最终 img 高 = DIV 高,而 img 宽 > DIV 宽, 此时将 img 左、右各截取或隐藏相同【宽度】的内容,在 DIV 内显示 img【水平】最中间的部分 如果: img 宽高比 < DIV 宽高比,则最终 img 宽 = DIV 宽,而 img 高 > DIV 高, 此时将 img 上、下各截取或隐藏相同【高度】的内容,在 DIV 内显示 img【垂直】最中间的部分 请高手不吝赐教!拜谢!
if(img 宽高比 > DIV 宽高比) 则最终 img 高 = DIV 高, if(img 宽 > DIV 宽) 则img【水平】剧中 你的话直接就翻成代码了 相信自己

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧