Question

新手问题在这里。在我的CSS我有一个隐藏溢出的div我正在显示图像。一些图像很高（不同的尺寸），这是一个问题。按比例缩小时，宽图像是可以的。

高大的图像我的div显示图像“向下”，这是正常的。然而，对于我的图像类型，顶部不是那么重要（游艇桅杆和帆）。有没有办法我可以在顶部切断而不是底部的div中显示图像？

有什么想法吗？谢谢大家

杰

Answer 1

您可以尝试这样的事情：

.image{
  height: 150px;
  overflow: hidden;
  position: relative;
}
img{
  position: absolute;
  bottom: 20px;
}

看到这个箱子：

http://jsbin.com/muyoce/1/edit

Answer 2

在你的CSS尝试

div.image_class{
    overflow-y:hidden;
}

div.image_class  img{
   position: absolute;
   top: 0px;
}

Answer 3

试试这个HTML：

<div class="hide_top">
    <img src="http://www.liveyachting.com/wp-content/uploads/2009/02/brenta-yacht-b60-4.jpg" alt="" />
</div>

然后应用此CSS：

.hide_top{width:50%; height:auto; max-height:400px; overflow:hidden; display:block;}
.hide_top img{width:100%; height:auto; transform: translateY(-50%); -webkit-transform:translateY(-50%); top:50%}

See fiddle here并使用值

Answer 4

您可以对图像执行margin-top: -Xpx并为每个图像大小设置类。例如

<div class="imgHold">
    <img class="img400x800" src="..." />
    <img class="img800x400" src="..." />
    <img class="img400x400" src="..." />
</div>

.imgHold {
    overflow: hidden;
}
.img400x800 {
    margin-top: -200px; /* set to how much it needs to be offset */
}
.img800x400 {
    margin-top: 50px; /* set to how much it needs to be offset */
}
.img400x400 {
    margin-top: 0px; /* maybe this doesn't need any offset */
}

CSS div溢出隐藏

4 个答案: