我们拥有的是一个包含用户上传的图像的div.这是代码:
HTML:
- <div class="container_img">
- <img height="120" width="150" src="[image name].jpg">
- </div>
CSS:
- div.container_img {
- overflow: hidden;
- width: 150px;
- height: 150px;
- }
我们的问题是,如果用户上传的图像的高度小于150px,底部空间很大.所以我们要垂直对齐图像,使它看起来不像浮动.
我已经尝试在网上搜索解决方案,但是我找不到与DIV中的动态图像一起使用的解决方案.一些解决方案要求您了解图像的尺寸.
有人有这个问题解决了吗?
解决方法
您需要使用JavaScript / jQuery来检测图像高度. CSS不是动态语言,您无法使用纯CSS检测高度.使用jQuery可以做到
jQuery的
- var $img = $('div.container_img img');
- var h = $img.height();
- $img.css('margin-top',+ h / -2 + "px"); //margin-top should be negative half of image height. This will center the image vertically when combined with position:absolute and top:50%.
CSS
- div.container_img {
- position:relative;
- width: 150px;
- height: 300px;
- }
- div.container_img img{
- position:absolute;
- top:50%;
- }
检查工作示例在http://jsfiddle.net/nQ4uu/2/