用溢出或剪輯切割圖像的頂部

我想用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來完成，那將是非常棒的。

來源

2015-12-23 twan

.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>

來源

2015-12-23 14:29:09 Imaginaerum

謝謝！這完成了這項工作。 – twan

-1

怎麼樣transformoverflow:hidden -container，bro/sis裏面的圖片？ :)

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

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

Bootply-link (you should use that, too)

來源

2015-12-23 14:26:44 moesphemie

雖然這個鏈接可能回答這個問題，但最好在這裏包含答案的基本部分並提供參考鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 - [來自評論]（/評論/低質量帖/ 10666004） – Guanxi

哦..你是完全正確的！ – moesphemie

你仍然可以使用overflow: hidden，使圖像，position: absolute並設置bottom: 0，這樣頂部溢出，但會被隱藏。請記住absolute父母應爲position: relative。所以

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

來源

2015-12-23 14:34:47 dorindo

你可以嘗試另一種方法

首先，你設定一個明確的措施股利和

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

而且這種方式，您可以與背景屬性background-size玩。我不確定這是否能解決您的問題，但在我看來，這是處理圖像最簡單的方法。

來源

2015-12-23 14:39:19

用溢出或剪輯切割圖像的頂部

回答

相關問題