選擇圖像與CSS

只是中段我有了一些CSS圖片：width:100%;選擇圖像與CSS

現在的形象是圍繞560px高，但我只希望選擇圖像的300像素，切斷頂和圖像的底部而不擠壓它。

可以做到這一點嗎？

我已經看過crop，但您必須選擇部分來做到這一點，所以它不會工作時，試圖讓中間。

Example of image cropping desired

來源

2015-04-21 user2924019

你需要的圖像進行裁剪dinamically？ – Dagriel

是的CSS。不使用'background-image'，圖片必須使用'src =「」' – user2924019

查看剪輯路徑 –

試試這個。這是使用「剪輯路徑」CSS值。這在@Sam Jacob的帖子中提到過。

<style> 
.clip-me { 
    position: absolute; 
    clip: rect(110px, 160px, 170px, 60px); 
    /* values describe a top/left point and bottom/right point */ 

    clip-path: inset(10px 20px 30px 40px); /* or "none" */ 
    /* values are from-top, from-right, from-bottom, from-left */ 

} 
</style> 
<img class="clip-me" src="thing-to-be-clipped.png">

注意：此CSS屬性確實在IE 不工作。

來源

2015-04-21 12:20:34 FoxInFlame

小心使用剪貼路徑，它不被支持通過IE瀏覽器：http://caniuse.com/#feat=css-clip-path – Getz

@Getz驚喜，驚喜。 ;） – 0x499602D2

非常感謝，我對IE不再感到困擾，沒有人應該使用它，微軟不應該繼續它。 – user2924019

使用剪輯路徑

img { 
    position: absolute; 
    clip: rect(0, 100px, 100px, 0); /* clip: shape(top, right, bottom, left);*/ 
}

編輯：正如在評論中提到，該位置是絕對的或固定的這個工作

如果你不想做絕對位置或固定位置，將要顯示的圖像設置爲容器中的背景（td，div，span等），然後調整背景位置以獲取所需的精靈。

由於mozilla頁面here說使用剪輯不是一個web標準，考慮使用剪輯路徑或背景位置來實現這一點。

img{ 

    /* deprecated version */ 
    position: absolute; /* absolute or fixed positioning required */ 
    clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ 
    /* values descript a top/left point and bottom/right point */ 

    /* current version (doesn't require positioning) */ 
    clip-path: inset(10px 20px 30px 40px); /* or "none" */ 
    /* values are from-top, from-right, from-bottom, from-left */ 

}

詳細解釋here

來源

2015-04-21 12:19:16

要記住：剪輯屬性僅適用於位置爲：absolute或position：fixed的元素。它不適用於相對或靜態定位。 – Dagriel

['clip' is depratated]（https://developer.mozilla.org/en-US/docs/Web/CSS/clip） – Jivings

@Jivings然後設置背景和調整背景位置是實現這個 –

將負margin-top你的形象，父母將需要一個overflow: hidden;

來源

2015-04-21 12:19:34 romuleald

我可能會錯過一些東西，但是不會有負值的餘量。所以如果你走這條路線，你需要別的東西去除或隱藏底部部分。 – stoj

你是對的，你可以簡單地爲圖像添加一個邊距底部的負片或者修復容器的高度 – romuleald

如果你有一個圖像列表並且它們的高度不同，那麼這將失敗 –

您可以使用clip-path：

/* values are from-top, from-right, from-bottom, from-left */ 
.clip { 
    clip-path: polygon(5% 5%, 80% 5%, 80% 60%, 90% 60%, 5% 60%); 
    -webkit-clip-path: polygon(5% 5%, 80% 5%, 80% 60%, 90% 60%, 5% 60%); 
}

這裏有一個例子的jsfiddle：http://jsfiddle.net/q08g3948/1/

來源

2015-04-21 12:24:33 Jivings

你可以使用background-position，而不是（這將是相當瀏覽器兼容）。

我知道你已經說過'沒有背景圖像' - 但是這可以通過腳本動態添加，如果需要可以背景位置。

快速樣品將是：

div{ 
 
    background:url(http://lorempixel.com/300/300); 
 
    background-position:0 -100px; 
 
    height:100px; 
 
    width:300px; 
 
    
 
    }

<div></div> 
 

 
<br/><br/>Original 
 
<br/><br/> 
 
<img src="http://lorempixel.com/300/300"/>

來源

2015-04-21 16:28:21 jbutler483

謝謝，我可以看到它是如何工作的。我要求避免使用背景圖片的原因是，這樣可以在不需要修改文件的情況下將其實施到Wordpress網站中。但它可能是唯一的選擇。謝謝。 – user2924019

使用相對定位的div +絕對定位圖像。使用top: -999px; bottom: -999px; margin-top: auto; margin-bottom: auto;垂直居中圖像。絕對響應。沒有硬編碼的像素或百分比值。

.image-wrap { 
 
    position: relative; 
 
    overflow: hidden; 
 
    /* fixed height */ 
 
    height: 300px; 
 
    /* for demonstration */ 
 
    margin-top: 1em; 
 
    margin-bottom: 1em; 
 
    box-shadow: 0 0 .5em red; 
 
} 
 
.image-wrap img { 
 
    position: absolute; 
 
    /* fit horizontally */ 
 
    width: 100%; 
 
    height: auto; 
 
    /* center vertically */ 
 
    top: -1000px; 
 
    bottom: -1000px; 
 
    margin-top: auto; 
 
    margin-bottom: auto; 
 
}

<div class="image-wrap"> 
 
    <img src="http://lorempixel.com/600/600/sports/4" width="600" height="600"> 
 
</div> 
 
<div class="image-wrap"> 
 
    <img src="http://lorempixel.com/600/600/sports/5" width="600" height="600"> 
 
</div>

來源

2015-04-21 18:34:02

選擇圖像與CSS

回答

相關問題