我们拥有的是一个包含用户上传的图像的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/