Css clip image then resize

Question

ホバリングの変更にさまざまな要素を含む大きな画像があります。 イメージがかなり大きいので、イメージの一部を切り取り、サイズを変更したいと思います。

img { 
    clip: rect(0px, 1124px, 186px, 38px); 
    width:500px; 
    height:auto; 
    position:absolute; 
} 

しかし、最終結果の表示画像は、1124px境界で切り取られた画像のほんの小さなバージョンです。 （それは作っていません）私は500 pxに設定しています。 しかし、私が望むのは、画像の切り抜いた部分だけが500pxの幅にリサイズされていることです。

最適なソリューションは何ですか？

がでビジュアルながら説明：今日 https://jsfiddle.net/0m939vmn/

Answer 1

、あなたはこれを達成するためにobject-fitとobject-positionを使用することができ、positionは、optionnalです：

img { 
 
    object-fit: none; 
 
    /* will not be resized */ 
 
    object-position: 0 0; 
 
    /* clip to your coordonates*/ 
 
    width: 500px; 
 
    height: auto; 
 
} 
 

 
img+img { 
 
    object-fit: none; 
 
    /* will not be resized */ 
 
    object-position: 0 -1050px; 
 
    /* clip to your coordonates*/ 
 
} 
 

 
img+img+img { 
 
    object-fit: none; 
 
    /* will not be resized */ 
 
    object-position: -1050px -1050px; 
 
    /* clip to your coordonates*/ 
 
} 
 

 
img+img+img+img { 
 
    object-fit: none; 
 
    /* will not be resized */ 
 
    object-position: -1050px 0; 
 
    /* clip to your coordonates*/ 
 
} 
 
img+img+img+img+img { 
 
    object-fit: none; 
 
    /* will not be resized */ 
 
    object-position: 50% 50%; 
 
    /* clip to your coordonates*/ 
 
}

the following image has width and height of 2000px.<br /> I'd like to have the red square only at a width and height of 500px. 
 
<br /> 
 
<br /> 
 

 
<img src='https://s14-eu5.ixquick.com/cgi-bin/serveimage? 
 
url=https%3A%2F%2Fvignette.wikia.nocookie.net%2Fmalware%2Fimages%2Fb%2Fba%2FWindows.png%2Frevision%2Flatest%3Fcb%3D20150730065805&sp=6789a53a9c28eb071f118bf9d294ffe0' /> 
 
<img src='https://s14-eu5.ixquick.com/cgi-bin/serveimage? 
 
url=https%3A%2F%2Fvignette.wikia.nocookie.net%2Fmalware%2Fimages%2Fb%2Fba%2FWindows.png%2Frevision%2Flatest%3Fcb%3D20150730065805&sp=6789a53a9c28eb071f118bf9d294ffe0' /> 
 
<img src='https://s14-eu5.ixquick.com/cgi-bin/serveimage? 
 
url=https%3A%2F%2Fvignette.wikia.nocookie.net%2Fmalware%2Fimages%2Fb%2Fba%2FWindows.png%2Frevision%2Flatest%3Fcb%3D20150730065805&sp=6789a53a9c28eb071f118bf9d294ffe0' /> 
 
<img src='https://s14-eu5.ixquick.com/cgi-bin/serveimage? 
 
url=https%3A%2F%2Fvignette.wikia.nocookie.net%2Fmalware%2Fimages%2Fb%2Fba%2FWindows.png%2Frevision%2Flatest%3Fcb%3D20150730065805&sp=6789a53a9c28eb071f118bf9d294ffe0' /> 
 
<img src='https://s14-eu5.ixquick.com/cgi-bin/serveimage? 
 
url=https%3A%2F%2Fvignette.wikia.nocookie.net%2Fmalware%2Fimages%2Fb%2Fba%2FWindows.png%2Frevision%2Flatest%3Fcb%3D20150730065805&sp=6789a53a9c28eb071f118bf9d294ffe0' />

---

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

object-fit CSSプロパティは、このような<img>や<video>に交換要素は、そのコンテナに合わせてサイズ変更する方法を指定します。

---

https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

object-position CSSプロパティは、そのボックス内の選択された要素の配向を決定します。あなたはimgタグを失うのbackground-positionと背景サイズを使用する必要がありますクリップともは（クリップの横に、サイズを変更する

---

）。またはサイズを変更する& div内のimgを切り詰めて最も素朴な方法としてオーバーフローさせて、私はあなたがこれらのことを既に理解していると思っているので、例を投稿しません。