html - 将图像垂直放置在 div 中

Question

我有一个问题需要帮助。谢天谢地，我的代码很灵活，所以我只提供一些通用标记。

我的主要限制(由于我从数据库中检索信息的方式)是图像不能是背景图像，否则这很容易。

我只是希望当我将鼠标悬停在图像上时图像会发生变化。我制作了一张比我需要的高两倍的图像——一半是彩色，一半是黑白。这个想法是，图像完全相同(一个人)——但是当你将鼠标悬停在它上面时——你会看到彩色版本。

我构建了 200 像素宽、400 像素高的“悬停”图像。它的标记非常简单:

<div class='staff_profile'>
     <h3>Staff Title</h3>
     <div class='staff_image'>
         <img src='.....' alt='....' />
     </div>
</div>

所以我想我需要这样的东西:

.staff_image {
   float: left;
   height: 200px;
   width: 200px;
}

问题是——使用它时，400px 高的图像默认显示在 staff_image div 的中心——所以我看到一半是黑白照片，一半是彩色照片。

我将使用 jQuery 来实现悬停 - 所以只需要一些 CSS 技巧来说明我需要使用哪些属性:

1. 将图像显示在最顶部
2. 从中途向下显示图像

我尝试使用填充和边距进行的所有尝试似乎都会将所有内容向下推，并且根本不会移动内部的实际图片。我基本上需要知道如何在该 div 内操纵对于固定高度 div 来说太高的图像。我在这里找到的答案似乎都没有帮助。有很多关于将图像居中的内容 - 但居中不是我想要做的 - 它恰恰相反! :)

感谢您的帮助。

Answer 1

给你:http://jsfiddle.net/xqxSK/

<div class='staff_profile'>
     <h3>Staff Title</h3>
     <div class='staff_image'>
         <img src='http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6' />
     </div>
</div>

.staff_image {
    overflow: hidden;
    height: 200px;
}
.staff_image img {
    position: relative;
}

.staff_image:hover img {
   top: -200px;
}

我使用 CSS 而不是 jquery 来实现悬停。这是一种更好的方法，因为它在触摸屏设备上效果更好。