如何让长大于宽,宽大于长的图片能正常显示在一个区块内
如何让长大于宽,宽大于长的图片能正常显示在一个区块内
放开那个女孩 发表于2个月前
如何让长大于宽,宽大于长的图片能正常显示在一个区块内
  • 发表于 2个月前
  • 阅读 5
  • 收藏 1
  • 点赞 0
  • 评论 0

现在有这么一个需求,在一个宽940px,高660px的区域内,里面有一张图,其图大小不确定,可能高大于宽,可能宽大于高,问题是要让这张图片在区域内能正常显示,比例不失调。

一开始想过若是宽大于到,则宽占100%,高大于宽时则高占100%。 问题在于,当图片为宽图时设置width:100%,而图片为长图时需设置height:100%。这样就需要使用js来判断操作,非常坑爹。

在网上查阅了资料后中和两篇文章,给出了解决办法。

第一篇文章, http://www.zhangxinxu.com/wordpress/?p=61  张鑫旭 :大小不固定的图片、多行文字的水平垂直居中。

第二篇文章, https://github.com/xiangpaopao/blog/issues/9  里面提到了 background-sizecontain;

所以解决方案是:

透明gif图片+背景定位

这里利用了background-position:center实现图片居中显示。这是个很实用也是很聪明的办法,对于维护控制成本都很不错。微软必应图片搜索的图片排列就是使用的这种方法。

方法的原理很简单,使用一个透明的gif图片做覆盖层,高宽拉伸至所需要的大小,然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上,因为实际项目中,这肯定是个动态的URL地址,css文件似乎不支持动态URL地址。下面就是此方法的实例表现。

嗯,得到完美解决!!!

 

共有 人打赏支持
粉丝 2
博文 103
码字总数 34053
×
放开那个女孩
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: