HTML或CSS可以給圖像帶來裁剪效果嗎？

我並非試圖實際裁剪圖像文件。圖像周圍有一個很厚的邊框，我只是想以某種方式隱藏它。標記html是這個。HTML或CSS可以給圖像帶來裁剪效果嗎？

<div class="imgDiv"> 
    <img height="200" width="200" src="http://site.com/image.jpg"> 
</div>

有沒有辦法讓圖片居中或調整大小，以便邊框不見了？

來源

2011-01-30 zmol

當然。假設你只想要中心100x100。你可以使用這個CSS：

.imgDiv { 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
} 
.imgDiv > img { 
    position: relative; 
    left: -50px; 
    top: -50px; 
}

這裏，我已經使用這種技術得到的128×128的頭像的中心64×64：http://jsfiddle.net/5kHbQ/

來源

2011-01-30 03:37:51 icktoofay

感謝。我喜歡這樣做。 – zmol 2011-01-30 06:20:53

你可以用CSS，內嵌做到這一點：

<div class="imgDiv" style="width:200px;height:200px;background:url(http://site.com/image.jpg) no-repeat -20px -20px;"></div>

或CSS：

.imgDiv{ 
    width:200px; 
    height:200px; 
    background:url(http://site.com/image.jpg) no-repeat -20px -20px; 
}

無論哪種方式，你會刪除<img>節點在html中。

玩的背景的寬度，高度和最後兩個值。

來源

2011-01-30 03:38:34 JCOC611

儘管不是使用它們的主要目的，但您可以使用CSS Sprites刪除邊框。

本質上，您將使用div元素定義您想要的圖像的高度和寬度。

然後，您會將background-image屬性設置爲圖像的URL（請注意，圖像的URL與CSS的位置相關，因此請注意，如果使用外部CSS文件而不是一個內聯style屬性）。

最後，您將設置background-position屬性來偏移圖像，以便它與您定義爲「框架」的div元素對齊。

來源

2011-01-30 03:39:55 casperOne

可以說你在圖像上有10個像素的惡意邊框。下面的CSS就會從視圖隱藏：

.imgDiv { width:180px; height:180px; overflow:hidden; } 
.imgDiv img { display:block; margin:-10px 0 0 -10px; }

的另一種方法將是使用位置：

.imgDiv { width:180px; height:180px; overflow:hidden; } 
.imgDiv img { position:relative; top:-10px; left:-10px; }

來源

2011-01-30 03:40:16

這隻會刪除頂部和左側部分。 – icktoofay 2011-01-30 03:41:18

HTML或CSS可以給圖像帶來裁剪效果嗎？

回答

相關問題