jquery – 如何垂直对齐div中的图像与动态高度?

前端之家收集整理的这篇文章主要介绍了jquery – 如何垂直对齐div中的图像与动态高度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们拥有的是一个包含用户上传的图像的div.这是代码

HTML

  1. <div class="container_img">
  2. <img height="120" width="150" src="[image name].jpg">
  3. </div>

CSS:

  1. div.container_img {
  2. overflow: hidden;
  3. width: 150px;
  4. height: 150px;
  5. }

我们的问题是,如果用户上传的图像的高度小于150px,底部空间很大.所以我们要垂直对齐图像,使它看起来不像浮动.

我已经尝试在网上搜索解决方案,但是我找不到与DIV中的动态图像一起使用的解决方案.一些解决方案要求您了解图像的尺寸.

有人有这个问题解决了吗?

解决方法

您需要使用JavaScript / jQuery来检测图像高度. CSS不是动态语言,您无法使用纯CSS检测高度.使用jQuery可以做到

jQuery的

  1. var $img = $('div.container_img img');
  2. var h = $img.height();
  3. $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

  1. div.container_img {
  2. position:relative;
  3. width: 150px;
  4. height: 300px;
  5. }
  6.  
  7. div.container_img img{
  8. position:absolute;
  9. top:50%;
  10. }

检查工作示例在http://jsfiddle.net/nQ4uu/2/

猜你在找的jQuery相关文章