裁剪和居中寬屏幕影像

我怎麼會自動裁剪圖像，在畫廊預覽，以便寬的圖像被剪切掉左邊和右邊？正好顯示圖像的中心部分在此所附圖片：裁剪和居中寬屏幕影像

crop and center wide image

我有這樣的結構：

<div class="wrapper" style="overflow: hidden; height: 100px; width: 120px;"> 
    <div class="container"> 
     <img /> 
    </div> 
</div>

我想只能用CSS和JavaScript的沒有做到這一點。
陰性切緣（固定的）是不是因爲更多鈔票我的照片的寬度可以是非常不同的。

來源

2016-01-21 Maxick

我通常用的是以下幾點：

.container { 
 
    height: 100px; 
 
    width: 120px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.container img { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%,-50%); 
 
    transform: translate(-50%,-50%); 
 
}

<div class="container"> 
 
<img src="http://placehold.it/400x350" /> 
 
</div>

這適用於任何圖像的大小。你甚至可以爲圖像添加一個高度，以限制其高度（如圖像中）到容器高度（然後它只會剪切圖像的左側和右側）。您可以將其用於任何元素，包括video。

來源

2016-01-21 15:01:15 somethinghere

作品！隨着一小部分（「身高：100％」的形象 - 拉伸）很酷。謝謝！ – Maxick

@Maxick我確實提到過你應該增加高度來達到類似於你的形象的效果。我通常使用這段代碼來拉伸背景視頻（如果將'min-width'和'min-height'設置爲100％，則很好地覆蓋整個區域） – somethinghere

可以使用帶有高負左，右值絕對定位。
這種組合寬度margin: 0 auto將集中在容器中的影像讓左右兩部分溢出：

div{ 
 
    position:relative; 
 
    width:300px; 
 
    height:150px; 
 
    overflow:hidden; 
 
} 
 
img{ 
 
    position:absolute; 
 
    display:block; 
 
    left:-100%; right:-100%; 
 
    height:100%; width:auto; 
 
    margin:0 auto; 
 
} 
 
/*** FOR THE DEMO ***/ 
 
div{margin:0 auto;border:1px solid red;overflow:visible;}img{z-index:-1;}

<div> 
 
    <img src="http://placehold.it/600x150"> 
 
</div>

來源

2016-01-21 15:05:23

-1

我認爲最簡單的方法是使圖像的背景圖像和居中像in this example。

基本上設置背景圖片在您.wrapper格是這樣的：

<div class="wrapper" style="background-image: url(/images/your-image.jpg)"> 
</div>

你做到這一點後，類wrapper不會使因爲許多，但你可以像preview或thumbnail改變它的東西。

然後你的造型看起來像這樣：

.wrapper { 
    width: 120px; //Or whatever width you need it to be. 
    height: 100px; //Or whatever height you need it to be. 
    background-size: cover; 
    background-position: center; 
}

這確實使用了一點內嵌樣式，其中一些人看不慣，但它確實工作，它很簡單。

來源

2016-01-21 15:13:09 arjabbar

這是怎麼回事？解釋將是很好的方式，我可以糾正我的問題。 – arjabbar

裁剪和居中寬屏幕影像

回答

相關問題