文档章节

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

放开那个女孩
 放开那个女孩
发布于 2017/09/09 15:25
字数 420
阅读 11
收藏 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属性

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

宇宙执政
2013/01/12
0
0
详解android:scaleType属性

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

程序袁_绪龙
2014/09/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql grant 用户权限总结

用户权限管理主要有以下作用: 1. 可以限制用户访问哪些库、哪些表 2. 可以限制用户对哪些表执行SELECT、CREATE、DELETE、DELETE、ALTER等操作 3. 可以限制用户登录的IP或域名 4. 可以限制用...

Airship
27分钟前
1
0
RabbitMQ学习(3)

1. 消费端 1. 消费端通过推模式或者拉模式从RabbitMQ中获取并消费消息,当消费者确认处理消息后,可以手动确认消息已被接收,然后就会将该消息从RabbitMQ的队列中标记再清除,消费者端还可以...

江左煤郎
38分钟前
1
0
linux mysql(5.7)开启慢查询

一、有3个配置需要设置, 1:相关开关 2:日志目录文件 3:慢查询的时间限制 二、设置完之后重启mysql service mariadb restart 三、重启后做个测试 连接mysql 并查询: select sleep(6); 四...

chro008
45分钟前
2
0
选择IDC机房、选择硬件、上架服务器、装系统

选择IDC机房 当业务量比较大的时候,往往选用IDC而不是公有云来跑业务。 IDC机房的服务一般分为两种 需要我们自己购买服务器和网络设备,托管到IDC机房。IDC机房会提供布线、巡检、硬件操作等...

李超小牛子
47分钟前
2
0
《傲慢与偏见》的读书笔记与读后感作文2400字

《傲慢与偏见》的读书笔记与读后感作文2400字: 作者:孙苑馨;笔者按:读书这个习惯是我爸妈养出来的。小时候父母赚的钱除了吃饭穿衣剩下的就是买书了,他们除了买各种新鲜出版的文艺派图书...

原创小博客
55分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部