Question

我正在尝试使用css剪切图像的顶部。但是使用overflow:hidden它会自动从底部到顶部开始隐藏它，而我想保留底部但是切掉顶部。我发现溢出只有x和y选项。

所以我尝试使用clip，但这只能在将位置设置为绝对或固定时应用，这会破坏我的响应能力（以及整体网站）。

这是一张图片的外观：

这就是我想要的样子：

这是我的一个产品图块的html标记：

<div class="col-md-3 col-lg-3 mb-80 mb-xs-40">
  <div class="post-prev-img">
    <a href="listing/product"><img src="cms/images/website/producten/categorien/product.jpg" alt="">
    </a>
  </div>
  <div class="post-prev-title font-alt align-center">
    <a href="listing/product">product</a>
  </div>
  <div class="post-prev-text align-center"></div>
  <div class="post-prev-more align-center">
    <a href="listing/product" class="btn btn-mod btn-gray btn-round"><i class="fa fa-info-circle"></i> Bekijk categorie</a>
  </div>
</div>

有没有简单的方法来实现这一目标？我不是在寻找大的javascript方法，如果可以用几行css来完成它会很棒。

Answer 1

.post-prev-imgbefore img  {
  border: solid 1px red; /* TO SEE RESULT... */
}

.post-prev-img {
   overflow: hidden; 
  }
.post-prev-img img  {
  border: solid 1px red; /* TO SEE RESULT... */
}
.post-prev-img a {
  height: 120px;  /* Your height... */
  position: relative;
   overflow: hidden;
  display: block;
  }

.post-prev-img a img  {
  position: absolute;
  bottom: 0;
}

<h1>BEFORE:</h1>
<div class="col-md-3 col-lg-3 mb-80 mb-xs-40">
    <div class="post-prev-imgbefore">
        <a href="listing/product"><img src="https://embed.gyazo.com/eb965662ca8fabb1de523e61c16cfe83.png" alt="">
        </a>
    </div>
    <div class="post-prev-title font-alt align-center">
        <a href="listing/product">product</a>
    </div>
    <div class="post-prev-text align-center"></div>
    <div class="post-prev-more align-center">
        <a href="listing/product" class="btn btn-mod btn-gray btn-round"><i class="fa fa-info-circle"></i> Bekijk categorie</a>
    </div>
</div>
<h1>AFTER:</h1>
<div class="col-md-3 col-lg-3 mb-80 mb-xs-40">
    <div class="post-prev-img">
        <a href="listing/product"><img src="https://embed.gyazo.com/eb965662ca8fabb1de523e61c16cfe83.png" alt="">
        </a>
    </div>
    <div class="post-prev-title font-alt align-center">
        <a href="listing/product">product</a>
    </div>
    <div class="post-prev-text align-center"></div>
    <div class="post-prev-more align-center">
        <a href="listing/product" class="btn btn-mod btn-gray btn-round"><i class="fa fa-info-circle"></i> Bekijk categorie</a>
    </div>
</div>

Answer 2

您仍然可以使用overflow: hidden，制作图片position: absolute并设置bottom: 0，这样顶部会溢出但会被隐藏。请记住，absolute父母应为position: relative。所以

.image_container {
  overflow: hidden;
  position: relative;
}
.image {
  bottom: 0;
  positon: relative
}

Answer 3

您可以尝试其他方法

首先，使用已定义的度量和

设置div

.myDiv{
 width:50%;
 height:300px;
 background-image:url('url_here');
}

通过这种方式，您可以使用background-size作为背景属性。我不确定这是否可以解决您的问题，但在我看来，这是处理图像最简单的方法。

Answer 4

transform - 容器内的overflow:hidden图片怎么样？兄弟/兄弟？：）

.post-prev-img {
    height: 250px;
    overflow: hidden;
}

.post-prev-img img {
    transform: translateY(-40px)
}

Bootply-link (you should use that, too)

用溢出或剪辑剪切图像的顶部

4 个答案: