我想顯示具有一定寬度和高度的URL中的圖像，即使它具有不同的大小比例。
是以我想調整大小(保持比例)，然後将圖像剪切到我想要的大小。
我可以用html img屬性調整大小，我可以用background-image剪切。
我怎麼能兩個都做？
例：
這個圖檔：
大小800x600像素，我想顯示像200x100像素的圖像
使用img我可以調整圖像200x150px的大小：
style="width: 200px; height: 150px;"
src="http://i.stack.imgur.com/wPh0S.jpg">
這給了我這個：
并且使用background-image我可以剪切圖像200x100像素。
style="background-image:
url('https://i.stack.imgur.com/wPh0S.jpg');
width:200px;
height:100px;
background-position:center;">
給我：
我怎麼能兩個都做？
調整圖像大小，然後将其剪切為我想要的大小？
您可以使用兩種方法的組合，例如。
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 400px;
height: 300px;
margin: -75px 0 0 -100px;
}
您可以使用負margin在内移動圖像。
請注意，如果在包含的圖像上設定position：relative，則需要在包含div上設定position：relative。如果你不這樣做，我發現IE實際上不會剪輯圖像。
也從.crop img類中删除高度
@ waqar-alamgir如果删除了高度聲明，它将無法工作
另請注意，使用css裁剪圖像時，使用者仍需下載下傳圖像。在将圖像發送給使用者之前，最好使用php和GD或其他圖像編輯庫來調整圖像大小并裁剪圖像。這一切都取決于你想要什麼，加載伺服器或使用者帶寬。
隻是其他人的注意事項：.crop高度和寬度定義了切割圖像最底部和最右邊部分的位置。 .crop img的高度和寬度将縮放圖像。 .crop img margin将平移圖像
@sanchothefat假設我們不知道圖像大小。我們需要使用Javascript指定保證金。對？這樣會導緻閃爍效果。你能想到其他任何解決方案嗎？
@Jeevan隐藏圖像，直到你的JS運作使用visibility：hidden;
@collindo是的。它會像一次渲染一樣工作。假設您在SERP中呈現某些内容，即在您鍵入時搜尋。而您正在使用它來顯示搜尋結果的圖像。是以，每次隐藏可見性時，圖像都會閃爍。
@Jeevan如果實施得好，它将适用于任何場景。例如，使用特殊類js-hide-until-loaded渲染圖像，然後在圖像onload事件觸發時删除該類。 οnlοad="doSomething(this); $(this).removeClass(js-hide-until-loaded)"
@collindo我最初關注的是它的可見性：隐藏，然後讓它可見。因為我們每隔一秒更新一次div就會引起輕微的閃爍。當文本在SERP中閃爍但圖像不同時，你無法說出來。
有沒有辦法讓裁剪的圖像響應？ coding.smashingmagazine.com/2011/01/12/
@skibulk你隻需要在圖像上使用百分比寬度和最大寬度。同樣的方法仍然适用
使用CSS3，可以使用background-size更改background-image的大小，同時實作兩個目标。
css3.info上有很多例子。
根據您的示例實作，使用donald_duck_4.jpg。在這種情況下，background-size: cover;就是您想要的 - 它适合background-image覆寫包含的整個區域并剪切多餘的區域(取決于比率)。
.with-bg-size {
background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
width: 200px;
height: 100px;
background-position: center;
background-size: cover;
}
Donald Duck!
css3 background-image background-size
很好的解決方案，但有一點需要注意的是，它與IE <9不相容(如果這對任何人都重要)。另外，我想提一下，如果你用cover替換cover為background-size，它會縮放，但不會裁剪圖像。
是否可以使用img标簽？
對于
标記，請檢視CSS圖像值和替換内容子產品級别3規範中的object-fit: cover和相關值。
你試過用這個嗎？
.centered-and-cropped { object-fit: cover }
我需要調整圖像大小，居中(垂直和水準)并裁剪它。
我很高興地發現，它可以在單個css-line中完成。
請檢視此處的示例：http：//codepen.io/chrisnager/pen/azWWgr/？edit = 110
以下是該示例中的CSS和HTML代碼：
.centered-and-cropped { object-fit: cover }
original
object-fit: cover
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
謝謝，我認為這是最容易和最普遍的方式 - 但它似乎不适用于IE：/在這裡找到文檔：developer.mozilla.org/de/docs/Web/CSS/object-fit
IE11或EDGE(14)caniuse.com/#feat=object-fit不支援CSS3對象适配
@ eye-wonder它在Edge 16中得到支援，即将推出。如果它非關鍵并且節約使用，它可以在今天使用
在CSS3中，我們可以嘗試img + object-fit或div + background-image。到目前為止，根據我的經驗，背景圖像可用于适應更多條件。
截至目前，這也得到了Edge的支援(不知道從什麼時候開始)。
.imgContainer {
overflow: hidden;
width: 200px;
height: 100px;
}
.imgContainer img {
width: 200px;
height: 120px;
}
包含div基本上通過隐藏溢出來裁剪圖像。
img {
position: absolute;
clip: rect(0px, 140px, 140px, 0px);
}
謝謝sanchothefat。
我對你的答案有所改進。由于裁剪非常适合每個圖像，是以這個定義應該是HTML而不是CSS。
object-fit may help you, if you're playing with
tag
以下代碼将為您裁剪圖像。你可以玩對象
img {
object-fit: cover;
width: 300px;
height: 337px;
}
在裁剪類中，放置要顯示的圖像大小：
.crop {
width: 282px;
height: 282px;
overflow: hidden;
}
.crop span.img {
background-position: center;
background-size: cover;
height: 282px;
display: block;
}
html看起來像：
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
執行個體：
https://jsfiddle.net/de4Lt57z/
HTML：
CSS：
.crop img{
width:400px;
height:300px;
position: absolute;
clip: rect(0px,200px, 150px, 0px);
}
說明：
此處圖像的大小由圖像的寬度和高度值調整。裁剪是由剪輯屬性完成的。
有關剪輯屬性的詳細資訊如下：
.crop {
float: left;
margin: .5em 10px .5em 0;
overflow: hidden;
position: relative;
border: 1px solid #ccc;
width: 150px;
height: 90px;
}
.crop img {
position: absolute;
top: -20px;
left: -55px;
}
您可以将img标記放在div标記中并執行這兩個操作，但我建議不要在浏覽器中縮放圖像。由于浏覽器具有非常簡單的縮放算法，是以它在大多數時間都是糟糕的工作。最好先在Photoshop或ImageMagick中進行縮放，然後将它提供給用戶端，非常漂亮。
我所做的是建立一個伺服器端腳本，它将在伺服器端調整大小并裁剪圖檔，這樣它就可以在interweb上發送更少的資料。
這是相當微不足道的，但如果有人有興趣，我可以挖掘并釋出代碼(asp.net)
CGI可能是最便攜的方法(并且帶寬有效)，除非OP打算允許使用者通過Javascript執行自己的大小調整和裁剪。
像Filestack這樣的服務會為你做這件事。
它們會顯示您的圖檔網址，并允許您使用網址參數調整其大小。這很容易。
在調整為200x100但保持縱橫比後，您的圖像将如下所示
整個網址看起來像這樣
https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg
但重要的是公平
resize=width:200/crop=d:[0,25,200,100]
哈哈哈好插頭
好的插頭可能 - 但同樣 - 一個很棒的服務(不，我沒有付錢說這個;-)) - 我真的剛剛注冊，它非常酷
如果您使用的是Bootstrap，請嘗試使用{ background-size: cover;
}作為，也可以給div一個類說，這樣它就變成了
div.example{
background-size: cover}
我最近需要這樣做。我想制作一個NOAA圖表的縮略圖連結。由于他們的圖表可以随時更改，我希望我的縮略圖随之改變。但是他們的圖表有一個問題：它頂部有一個巨大的白色邊框，是以如果你隻是縮放它來制作縮略圖，你最終會在文檔中留下無關的空白。
這是我解決它的方式：
http://sealevel.info/example_css_scale_and_crop.html
首先，我需要做一點算術。 NOAA的原始圖像是960×720像素，但前七十個像素是多餘的白色邊框區域。我需要一個348×172的縮略圖，頂部沒有額外的邊框區域。這意味着原始圖像的期望部分是720-70 = 650像素高。我需要将其縮小到172像素，即172/650 = 26.5％。這意味着需要從縮放圖像的頂部删除70 = 19行像素中的26.5％。
是以…
設定高度= 172 + 19 = 191像素：
高度= 191
将下邊距設定為-19像素(将圖像縮短為172像素高)：
下邊距：-19px
将頂部位置設定為-19像素(向上移動圖像，使前19個像素行溢出并隐藏而不是底部)：
頂部：-19px
生成的HTML如下所示：
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…">
正如您所看到的，我選擇了包含标簽的樣式，但您可以設定樣式。
這種方法的一個工件是，如果顯示邊框，則頂部邊框将丢失。因為無論如何我使用border = 0，這對我來說不是問題。
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 100%;
}