文档章节

如何让长大于宽,宽大于长的图片能正常显示在一个区块内

放开那个女孩
 放开那个女孩
发布于 2017/09/09 15:25
字数 420
阅读 10
收藏 1

现在有这么一个需求,在一个宽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地址。下面就是此方法的实例表现。

嗯,得到完美解决!!!

 

© 著作权归作者所有

共有 人打赏支持
放开那个女孩
粉丝 3
博文 112
码字总数 43036
作品 0
杭州
程序员
私信 提问
图片在固定宽高盒子中的显示问题

我们经常可能会遇到这样一个情况: 在一个固定宽高的盒子中,要放置一张宽高比不定的图片(比如说后台上传的图片),这时候图片应该如何设置样式呢? 有人可能会说,那还不简单,图片宽高设置...

璿而不华
2017/11/14
0
0
android:scaleType属性 使用技巧

android:scaleType是控制图片如何resized/moved来匹对ImageView的size。 ImageView.ScaleType / android:scaleType值的意义区别: CENTER /center 按图片的原来size居中显示,当图片长/宽超过...

天王盖地虎626
2014/12/18
2.4K
2
[Android学习]ImageView的scaletype属性

ImageView的属性android:scaleType,即 ImageView.setScaleType(ImageView.ScaleType)。android:scaleType是控制图片如何 resized/moved来匹对ImageView的size。ImageView.ScaleType / andro......

守夜之星
2012/06/20
0
0
详解android:scaleType属性

android:scaleType是控制图片如何resized/moved来匹对ImageView的size。 ImageView.ScaleType / android:scaleType值的意义区别: CENTER /center 按图片的原来size居中显示,当图片长/宽超过...

程序袁_绪龙
2014/09/08
0
0
android:scaleType属性

ImageView.ScaleType.CENTER|android:scaleType="center" 以原图的几何中心点和ImagView的几何中心点为基准,按图片的原来size居中显示,不缩放,当图片长/宽超过View的长/宽,则截取图片的居...

宇宙执政
2013/01/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

AS连接网易Mumu模拟器

1、安装模拟器 打开这个网址现在模拟器然后安装 http://mumu.163.com/ 2、安装完成后启动模拟器 3、进入模拟器安装目录 例如本机的安装目录:C:\Program Files (x86)\MuMu\emulator\nemu\vmo...

HGMrWang
31分钟前
9
0
设计要做到扩展性强还挺难的

概述 在日常开发中,有时候你的上司会跟你说,这个模块的设计扩展性要高。把这句话说出来很简单,但是要做到则非常难。导致难的其中一个因素是: 你不熟悉这个行业的业务的玩法 我举个例子来...

Sam哥哥聊技术
32分钟前
3
0
聊聊 scala 的模式匹配

一. scala 模式匹配(pattern matching) pattern matching 可以说是 scala 中十分强大的一个语言特性,当然这不是 scala 独有的,但这不妨碍它成为 scala 的语言的一大利器。 scala 的 patt...

终日而思一
34分钟前
2
0
Spring事物手动回滚

手动回滚: 方法1:在service层方法的catch语句中增加:TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();语句,手动回滚,这样上层就无需去处理异常(现在项目的做法)...

寒风中的独狼
38分钟前
2
0
直角三角形的三角函数

sinA = a/c;A = asin(a/c); 特殊角度的三角函数值

一个小妞
46分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部