文档章节

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

放开那个女孩
 放开那个女孩
发布于 2017/09/09 15:25
字数 420
阅读 9
收藏 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 手势检测实战 打造支持缩放平移的图片预览效果(上)

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39474553,本文出自:【张鸿洋的博客】 1、背景 现在app中,图片预览功能肯定是少不了的,用户基本已经形成条件反射,看...

lmj623565791
2014/09/25
0
0
详解android:scaleType属性

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

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

没有更多内容

加载失败,请刷新页面

加载更多

no such module 'pop'问题

在github上 clone 了一个 swift 项目,编译时提示"no such module 'POP'"错误,查了一下居然是因为podfile中指定的最低版本是iOS 11.0,大于我测试手机的iOS版本10.3.3,将Podfile中的最低版...

yoyoso
48分钟前
1
0
redis 系列一 -- 简介及安装

1.简介 redis -- remote dictionary server 远程字典服务 使用 C 语言编写; 高性能的 key-value数据库; 内存数据库,支持数据持久化。 Redis 是一个开源(BSD许可)的,内存中的数据结构存...

imbiao
今天
3
0
nginx log记录请求响应时间

有时为了方便分析接口性能等,需要记录请求的时长,通过修改nginx的日志格式可以做到,如 添加一个新的log_format log_format timed_combined '$remote_addr - $remote_user [$time_local] "...

swingcoder
今天
4
0
Spring MVC之RequestMappingHandlerMapping匹配

对于RequestMappingHandlerMapping,使用Spring的同学基本都不会陌生,该类的作用有两个: 通过request查找对应的HandlerMethod,即当前request具体是由Controller中的哪个方法进行处理; 查...

爱宝贝丶
今天
3
0
Java Web--增删改查之二界面后台java代码(转载参考)

/** *  *//** * @author Administrator * */package dao; import java.sql.*;public class DBConn {/** * 链接数据库 * @return */  ...

小橙子的曼曼
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部