文档章节

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

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

精选30+云产品,助力企业轻松上云!>>>

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

嗯,得到完美解决!!!

 

放开那个女孩
粉丝 4
博文 112
码字总数 43124
作品 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.5K
2
android:scaleType

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

smail歇歇
2014/06/25
18
0
android:scaleType详解

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

守夜之星
2012/07/05
112
0
[Android学习]ImageView的scaletype属性

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

守夜之星
2012/06/20
134
0

没有更多内容

加载失败,请刷新页面

加载更多

PG库实现 t+1 同步

需求:业务场景中有很多需要查询t+1的数据,但又不想影响生产实时的业务,是否可以搭建一个延时的灾备库就可以解决这个问题呢。 问题:如何实现延时? 解决方向:recovery_min_apply_delay ...

易野
4分钟前
0
0
jpgraph 实例文档

下载 在官方网站http://www.aditus.nu/jpgraph/ 下载jpgraph,其中1.X系列是用于PHP4的,2.X系列是用于PHP5的。 安装 将下载的得到的jpgraph压缩文件解压至相应的路径。 配置 首先需要注意的...

osc_2ch77h9m
4分钟前
9
0
画IDC状态趋势图

[背景]公司以前对IDC状态的测试都是通过perl+crond结合,向指定某IDC的IP发送icmp包,并将其结果保存到test.log下,对于后斯的分析,是采取手工的方式(格式化数据,结合excel),这样操作下...

osc_moibnxyj
5分钟前
6
0
整理性能计数器注释

[前话]收集性能计数器注释,以备使用! [内容] 1 % Processor Time (Processor _Total) 指处理器用来执行非闲置线程时间的百分比。计算方法是,度量处理器用来执行空闲线程的时间,然后用 10...

osc_5nscij7v
6分钟前
0
0
你想要的WinForm界面开发教程在这里 - 如何设置较厚的表格边框

下载DevExpress v20.1完整版 DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅、美观且易于使用的应用程序。想要体验?点击下载>> 应用程序的外观随时代发展不断变化,自厚...

FILA6666
7分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部