HTML和CSS

剪輯圖片我想在一個144px X 144px div元素來顯示圖像。圖像總是大於144px，所以我想縮放它們。我的意思是，最小的一面會觸及div的邊緣，從另一面切割 - 與信箱相反。HTML和CSS

我怎麼能做到這一點，它的工作對舊的瀏覽器如IE呢？

編輯：
改變了形象，第一個錯了，對不起。調整圖像的大小，以便在div裏面有沒有圖像
enter image description here

來源

2011-08-17 Francisc

你能畫一個圖像給我們一個想法你想要做什麼 – samccone

我想你想要的是[平移和掃描] （http://en.wikipedia.org/wiki/Pan_and_scan)*效果。不要以爲你可以在沒有js的情況下實現這一點。 *編輯 – TonioElGringo

My first answer解決故意擋住了圖像的一部分，而有意保持所佔用的空間。如果你只是想形象不帶空格或其他任何佔用可見的一部分，最好的選擇將是使用CSS Sprite techniques。

下面是一個例子：

HTML（複製並粘貼到自己的文件了全面測試）：

<html> 
<head> 
<style type="text/css"> 
.clippedImg { 
    background-image: url("http://www.grinderschool.com/images/top_main.jpg"); 
    background-position: -75px -55px; 
    height: 100px; 
    width: 235px; 
} 
</style> 
</head> 
<body> 
<div class='clippedImg'>&nbsp;</div> 
</body> 
</html>

CSS（這是真正的關鍵）：

.clippedImg { 
    background-image: url("http://www.grinderschool.com/images/top_main.jpg"); 
    background-position: -75px -55px; 
}

您可以調整位置編號以精確獲取所需圖像的部分和大小。

還要注意的是，如果你想解決這個黑盒子，它比我做其他職位更容易。只要把父母div圍繞這一個：

<div class='blackBox'> 
    <div class='clippedImg'>&nbsp;</div> 
<div>

隨着填充和寬度設置爲創建所需的黑箱效應：

.blackBox { 
    background-color: black; 
    padding: 0 20px; 
    width: 235px; 
}

來源

2011-08-17 14:15:30

不要。我知道你的意思，那不是我需要的。不過謝謝。 – Francisc

之前的例子非常糟糕，因爲我沒有使用真實的圖像，所以尺寸都搞砸了。我真的認爲這會做你想要的。嘗試從現在開始！查看http://www.grinderschool.com/images/top_main.jpg，並將您在將上述HTML保存到本機上的本地文件時看到的內容進行比較。你會看到我只選擇了一小部分要顯示的圖像。 –

Arg！再次調整。在Firebug中玩得太多，然後不復制所有的調整真的會讓你失望！現在它會正確設置高度和寬度，這是你想要的關鍵。 –

沒有空間CSS或屬性只圖像的寬度設置爲144px。高度將自動縮放。我相當肯定它的工作原理與IE 6一樣低。我不確定比這更早的事情。

來源

2011-08-17 14:00:26 Cfreak

好主意，但這將是信箱縮放，它需要JavaScript來計算更大的一面。我需要一個無JS的解決方案。 – Francisc

不需要。此解決方案不需要JavaScript。瀏覽器自動計算。你也可以設置高度而不是寬度，它會做同樣的事情。我真的不確定你的意思是「信箱縮放」。你的盒子是方形的。 – Cfreak

但看到你的例子，我發現你並不是真的追隨我的想法。我想你會需要多個div，因爲傑弗里布萊克在他的回答中提出了建議。 – Cfreak

如果我看了你的問題的權利，你是不是要調整圖像大小，而是真正切斷圖像的一部分。如果您只是想調整圖像大小，請按照其他相關答案。

我能想到的最簡單的方法其實切斷圖像這是添加<div class='blockOut'> </div>，然後用CSS來放置&大小格，使它的顏色匹配您的網頁的背景顏色，並把它放在前面圖片。例如CSS：

.blockOut { 
    position: relative; 
    top: -100px; 
    left: 100px; 
    background-color: white; 
    z-index: 2; //this is the important part for putting this div in front of the other one 
}

編輯：請注意，由於您添加了一個例子表明您希望各方昏了過去，這將需要單獨的div爲塗黑頂部，每邊和底部。另外，如果你想要顯示圖像的一部分（就像你的例子中那樣），你可以使用CSS透明選項。

來源

2011-08-17 14:04:29

只有可見的部分是可見的。沒有黑色。我認爲剪裁是這個詞，但不知道。背景剪輯會很好，但IE6不知道它。 – Francisc

請注意，我已經在所有主流瀏覽器中向IE6做過類似的事情。 –

div{height:114px;width:114px;overflow:hidden;} 
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}

它掩蓋着只顯示img的一部分，就像你在標題中說的那樣。但在描述中說你想調整img。決定yuorself

來源

2011-08-17 14:13:45 Einacio

這絕對是最乾淨和最簡單的方法。你碰巧知道IE6是否支持溢出CSS屬性？ –

我想調整圖像的大小，以便最小的一面與遮罩側相匹配。在這種情況下144px。 – Francisc

掩蔽隱藏，不調整大小。我看到你改變了這個問題。 – Einacio

做你想要用CSS什麼，你應該使用最大高度：144px;最大寬度：144px。但ie6並沒有實現這些簡單的屬性，所以你必須使用js

來源

2011-08-17 15:26:28 Einacio

回答

相關問題