CSS顯示調整大小並裁剪的圖像

我想顯示具備特定寬度和高度的URL的圖像，即便它具備不一樣的尺寸比例。 因此我想調整大小（保持比例），而後將圖像切成我想要的大小。

我能夠使用html img屬性調整大小，也能夠使用background-image進行裁剪。
我該怎麼辦？

例：

這個圖片：

尺寸爲800x600像素，我想顯示爲200x100像素的圖像

使用img我能夠將圖像尺寸調整爲200x150px ：

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">

這給了我這個：

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">

使用background-image我能夠將圖像切成200x100像素。

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

給我：

<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

我該怎麼辦？
調整圖像大小，而後將其切成我想要的大小？

---

#1樓

<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p>

---

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

---

#2樓

謝謝sanchothefat。

我對你的回答有所改善。 因爲裁剪是針對每一個圖像量身定製的，所以此定義應使用HTML而不是CSS。

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

---

#3樓

<div class="crop">
    <img src="image.jpg"/>
</div>

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

---

#4樓

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

---

#5樓

你試過用這個嗎？

.centered-and-cropped { object-fit: cover }

我須要調整圖像大小，居中（垂直和水平方向），而後進行裁切。

我很高興發現它能夠在單個CSS行中完成。 在此處檢查示例： http : //codepen.io/chrisnager/pen/azWWgr/?editors=110

---

這是該示例的CSS和HTML代碼：

.centered-and-cropped { object-fit: cover }

<h1>original</h1> <img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear"> <h1>object-fit: cover</h1> <img class="centered-and-cropped" width="200" height="200" style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">