CSS Display an Image Resized and Cropped

Question

I want to show an image from an URL with a certain width and height even if it has a different size ratio   So I want to resize  maintaining the ratio  and then cut the image to the size I want   I can resize with html img property and I can cut with background-image   How can I do both   Example   This image      Has the size 800x600 pixels and I want to show like an image of 200x100 pixels   With img I can resize the image 200x150px    lt img      style  width  200px  height  150px        src  http   i stack imgur com wPh0S jpg  gt     That gives me this    x000D   x000D   lt img style  width  200px  height  150px   src  https   i stack imgur com wPh0S jpg  gt  x000D   x000D   x000D      And with background-image I can cut the image 200x100 pixels    lt div      style  background-image             url  https   i stack imgur com wPh0S jpg         width 200px       height 100px       background-position center   gt  amp nbsp  lt  div gt     Gives me    x000D   x000D       lt div style  background-image url  https   i stack imgur com wPh0S jpg    width 200px  height 100px  background-position center   gt  amp nbsp  lt  div gt  x000D   x000D   x000D     How can I do both   Resize the image and then cut it the size I want

User · Answer

Try using the clip-path property      The clip-path property lets you clip an element to a basic shape or to   an SVG source       Note  The clip-path property will replace the deprecated clip   property     x000D   x000D  img   x000D    width  150px  x000D    clip-path  inset 30px 35px   x000D    x000D   lt img src  http   i stack imgur com wPh0S jpg  gt  x000D   x000D   x000D    More examples here

User · Answer

With CSS3 it s possible to change the size of a background-image with background-size  fulfilling both goals at once   There are a bunch of examples on css3 info   Implemented based on your example  using donald duck 4 jpg  In this case  background-size  cover  is just what you want - it fits the background-image to cover the entire area of the containing  lt div gt  and clips the excess  depending on the ratio     x000D   x000D   with-bg-size   x000D    background-image  url  https   i stack imgur com wPh0S jpg    x000D    width  200px  x000D    height  100px  x000D    background-position  center  x000D       Make the background image cover the area of the  lt div gt   and clip the excess    x000D    background-size  cover  x000D    x000D   lt div class  with-bg-size  gt Donald Duck  lt  div gt  x000D   x000D   x000D    css3 background-image background-size

User · Answer

I needed to do this recently  I wanted to make a thumbnail-link to a NOAA graph  Since their graph could change at any time  I wanted my thumbnail to change with it  But there s a problem with their graph  it has a huge white border at the top  so if you just scale it to make the thumbnail you end up with extraneous whitespace in the document   Here s how I solved it   http   sealevel info example css scale and crop html  First I needed to do a little bit of arithmetic  The original image from NOAA is 960    720 pixels  but the top seventy pixels are a superfluous white border area  I needed a 348    172 thumbnail  without the extra border area at the top  That means the desired part of the original image is 720 - 70   650 pixels high  I needed to scale that down to 172 pixels  i e   172   650   26 5   That meant 26 5  of 70   19 rows of pixels needed to be deleted from the top of the scaled image   So      Set the height   172   19   191 pixels   height 191 Set the bottom margin to -19 pixels  shortening the image to 172 pixels high    margin-bottom -19px Set the top position to -19 pixels  shifting the image up  so that the top 19 pixel rows overflow  amp  are hidden instead of the bottom ones    top -19px   The resulting HTML looks like this    lt a href       style  display inline-block overflow hidden  gt   lt img width 348 height 191 alt    style  border 0 position relative margin-bottom -19px top -19px  src       gt  lt  a gt    As you can see  I chose to style the containing  lt a gt  tag  but you could style a  lt div gt   instead   One artifact of this approach is that if you show the borders  the top border will be missing  Since I use border 0 anyhow  that wasn t an issue for me

User · Answer

You could use a combination of both methods eg    x000D   x000D       crop   x000D          width  200px  x000D          height  150px  x000D          overflow  hidden  x000D        x000D   x000D       crop img   x000D          width  400px  x000D          height  300px  x000D          margin  -75px 0 0 -100px  x000D        x000D       lt div class  crop  gt  x000D           lt img src  https   i stack imgur com wPh0S jpg  alt  Donald Duck  gt  x000D       lt  div gt  x000D   x000D   x000D    You can use negative margin to move the image around within the  lt div  gt

User · Answer

If you are using Bootstrap  try using    background-size  cover    for the  lt div gt  maybe give the div a class say  lt div class  example  style url     your image jpeg    gt  so it becomes  div example  background-size  cover

User · Answer

With CSS3 it s possible to change the size of a background-image with background-size  fulfilling both goals at once   There are a bunch of examples on css3 info   Implemented based on your example  using donald duck 4 jpg  In this case  background-size  cover  is just what you want - it fits the background-image to cover the entire area of the containing  lt div gt  and clips the excess  depending on the ratio     x000D   x000D   with-bg-size   x000D    background-image  url  https   i stack imgur com wPh0S jpg    x000D    width  200px  x000D    height  100px  x000D    background-position  center  x000D       Make the background image cover the area of the  lt div gt   and clip the excess    x000D    background-size  cover  x000D    x000D   lt div class  with-bg-size  gt Donald Duck  lt  div gt  x000D   x000D   x000D    css3 background-image background-size

User · Answer

imgContainer     overflow  hidden    width  200px    height  100px     imgContainer img     width  200px    height  120px         lt div class  imgContainer  gt     lt img src  imageSrc    gt   lt  div gt    The containing div with essentially crop the image by hiding the overflow

User · Answer

You can put the img tag in a div tag and do both  but I would recommend against scaling images in the browser   It does a lousy job most of the time because browsers have very simplistic scaling algorithms   Better to do your scaling in Photoshop or ImageMagick first  then serve it up to the client nice and pretty

User · Answer

object-fit may help you  if you re playing with  lt img gt  tag   The below code will crop your image for you  You can play around with object-fit  img     object-fit  cover    width  300px    height  337px

User · Answer

Thanks sanchothefat   I have an improvement to your answer  As crop is very tailored for every image  this definitions should be at the HTML instead of CSS    lt div style  overflow hidden   gt      lt img src  img jpg  alt    style  margin -30  0px -10  0px     gt   lt  div gt

User · Answer

What I ve done is to create a server side script that will resize and crop a picture on the server end so it ll send less data across the interweb   It s fairly trivial  but if anyone is interested  I can dig up and post the code  asp net

User · Answer

I needed to do this recently  I wanted to make a thumbnail-link to a NOAA graph  Since their graph could change at any time  I wanted my thumbnail to change with it  But there s a problem with their graph  it has a huge white border at the top  so if you just scale it to make the thumbnail you end up with extraneous whitespace in the document   Here s how I solved it   http   sealevel info example css scale and crop html  First I needed to do a little bit of arithmetic  The original image from NOAA is 960    720 pixels  but the top seventy pixels are a superfluous white border area  I needed a 348    172 thumbnail  without the extra border area at the top  That means the desired part of the original image is 720 - 70   650 pixels high  I needed to scale that down to 172 pixels  i e   172   650   26 5   That meant 26 5  of 70   19 rows of pixels needed to be deleted from the top of the scaled image   So      Set the height   172   19   191 pixels   height 191 Set the bottom margin to -19 pixels  shortening the image to 172 pixels high    margin-bottom -19px Set the top position to -19 pixels  shifting the image up  so that the top 19 pixel rows overflow  amp  are hidden instead of the bottom ones    top -19px   The resulting HTML looks like this    lt a href       style  display inline-block overflow hidden  gt   lt img width 348 height 191 alt    style  border 0 position relative margin-bottom -19px top -19px  src       gt  lt  a gt    As you can see  I chose to style the containing  lt a gt  tag  but you could style a  lt div gt   instead   One artifact of this approach is that if you show the borders  the top border will be missing  Since I use border 0 anyhow  that wasn t an issue for me

User · Answer

lt div class  crop  gt       lt img src  image jpg   gt   lt  div gt       crop     width  200px    height  150px    overflow  hidden     crop img     width  100       Here you can use margins for accurate positioning of cropped image

User · Answer

lt p class  crop  gt  lt a href  http   templatica com  title  Css Templates  gt       lt img src  img jpg  alt  css template    gt  lt  a gt  lt  p gt        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

User · Answer

You can put the img tag in a div tag and do both  but I would recommend against scaling images in the browser   It does a lousy job most of the time because browsers have very simplistic scaling algorithms   Better to do your scaling in Photoshop or ImageMagick first  then serve it up to the client nice and pretty

User · Answer

Live Example  https   jsfiddle net de4Lt57z   HTML    lt div class  crop  gt     lt img src  example jpg  alt         gt   lt  div gt    CSS        crop img        width 400px        height 300px        position  absolute        clip  rect 0px 200px  150px  0px             Explanation  Here image is resized by width and height value of the image  And crop is done by clip property   For details about clip property follow   http   tympanus net codrops 2013 01 16 understanding-the-css-clip-property

User · Answer

You could use a combination of both methods eg    x000D   x000D       crop   x000D          width  200px  x000D          height  150px  x000D          overflow  hidden  x000D        x000D   x000D       crop img   x000D          width  400px  x000D          height  300px  x000D          margin  -75px 0 0 -100px  x000D        x000D       lt div class  crop  gt  x000D           lt img src  https   i stack imgur com wPh0S jpg  alt  Donald Duck  gt  x000D       lt  div gt  x000D   x000D   x000D    You can use negative margin to move the image around within the  lt div  gt

User · Answer

There are services like Filestack that will do this for you    They take your image url and allow you to resize it using url parameters   It is pretty easy   Your image would look like this after resizing to 200x100 but keeping the aspect ratio  The whole url looks like this  https   process filestackapi com AhTgLagciQByzXpFGRI0Az resize width 200 crop d  0 25 200 100  https   i stack imgur com wPh0S jpg   but the important part is just  resize width 200 crop d  0 25 200 100

User · Answer

object-fit may help you  if you re playing with  lt img gt  tag   The below code will crop your image for you  You can play around with object-fit  img     object-fit  cover    width  300px    height  337px

User · Answer

lt p class  crop  gt  lt a href  http   templatica com  title  Css Templates  gt       lt img src  img jpg  alt  css template    gt  lt  a gt  lt  p gt        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

User · Answer

img       position  absolute      clip  rect 0px 60px 200px 0px

User · Answer

imgContainer     overflow  hidden    width  200px    height  100px     imgContainer img     width  200px    height  120px         lt div class  imgContainer  gt     lt img src  imageSrc    gt   lt  div gt    The containing div with essentially crop the image by hiding the overflow

User · Answer

You could use a combination of both methods eg    x000D   x000D       crop   x000D          width  200px  x000D          height  150px  x000D          overflow  hidden  x000D        x000D   x000D       crop img   x000D          width  400px  x000D          height  300px  x000D          margin  -75px 0 0 -100px  x000D        x000D       lt div class  crop  gt  x000D           lt img src  https   i stack imgur com wPh0S jpg  alt  Donald Duck  gt  x000D       lt  div gt  x000D   x000D   x000D    You can use negative margin to move the image around within the  lt div  gt

User · Answer

You can put the img tag in a div tag and do both  but I would recommend against scaling images in the browser   It does a lousy job most of the time because browsers have very simplistic scaling algorithms   Better to do your scaling in Photoshop or ImageMagick first  then serve it up to the client nice and pretty

User · Answer

imgContainer     overflow  hidden    width  200px    height  100px     imgContainer img     width  200px    height  120px         lt div class  imgContainer  gt     lt img src  imageSrc    gt   lt  div gt    The containing div with essentially crop the image by hiding the overflow

User · Answer

There are services like Filestack that will do this for you    They take your image url and allow you to resize it using url parameters   It is pretty easy   Your image would look like this after resizing to 200x100 but keeping the aspect ratio  The whole url looks like this  https   process filestackapi com AhTgLagciQByzXpFGRI0Az resize width 200 crop d  0 25 200 100  https   i stack imgur com wPh0S jpg   but the important part is just  resize width 200 crop d  0 25 200 100

User · Answer

lt div class  crop  gt       lt img src  image jpg   gt   lt  div gt       crop     width  200px    height  150px    overflow  hidden     crop img     width  100       Here you can use margins for accurate positioning of cropped image

User · Answer

Did you try to use this    centered-and-cropped   object-fit  cover     I needed to resize image  center  both vertically and horizontally  and than crop it   I was happy to find  that it could be done in a single css-line   Check the example here  http   codepen io chrisnager pen azWWgr  editors 110    Here is the CSS and HTMLcode from that example    x000D   x000D   centered-and-cropped   object-fit  cover   x000D   lt h1 gt original lt  h1 gt  x000D   lt img height  200  src  https   s3-us-west-2 amazonaws com s cdpn io 3174 bear jpg  alt  Bear  gt  x000D       x000D   lt h1 gt object-fit  cover lt  h1 gt  x000D   lt img class  centered-and-cropped  width  200  height  200   x000D  style  border-radius 50   src  https   s3-us-west-2 amazonaws com s cdpn io 3174 bear jpg  alt  Bear  gt  x000D   x000D   x000D

User · Answer

Live Example  https   jsfiddle net de4Lt57z   HTML    lt div class  crop  gt     lt img src  example jpg  alt         gt   lt  div gt    CSS        crop img        width 400px        height 300px        position  absolute        clip  rect 0px 200px  150px  0px             Explanation  Here image is resized by width and height value of the image  And crop is done by clip property   For details about clip property follow   http   tympanus net codrops 2013 01 16 understanding-the-css-clip-property

User · Answer

Did you try to use this    centered-and-cropped   object-fit  cover     I needed to resize image  center  both vertically and horizontally  and than crop it   I was happy to find  that it could be done in a single css-line   Check the example here  http   codepen io chrisnager pen azWWgr  editors 110    Here is the CSS and HTMLcode from that example    x000D   x000D   centered-and-cropped   object-fit  cover   x000D   lt h1 gt original lt  h1 gt  x000D   lt img height  200  src  https   s3-us-west-2 amazonaws com s cdpn io 3174 bear jpg  alt  Bear  gt  x000D       x000D   lt h1 gt object-fit  cover lt  h1 gt  x000D   lt img class  centered-and-cropped  width  200  height  200   x000D  style  border-radius 50   src  https   s3-us-west-2 amazonaws com s cdpn io 3174 bear jpg  alt  Bear  gt  x000D   x000D   x000D

User · Answer

You can use Kodem s Image Resize Service  You can resize any image with just a http call  Can be used casually in the browser or used in your production app    Upload the image somewhere you prefer  S3  imgur etc   Plug it into your dedicated API url  from our dashboard

User · Answer

What I ve done is to create a server side script that will resize and crop a picture on the server end so it ll send less data across the interweb   It s fairly trivial  but if anyone is interested  I can dig up and post the code  asp net

User · Answer

What I ve done is to create a server side script that will resize and crop a picture on the server end so it ll send less data across the interweb   It s fairly trivial  but if anyone is interested  I can dig up and post the code  asp net

User · Answer

imgContainer     overflow  hidden    width  200px    height  100px     imgContainer img     width  200px    height  120px         lt div class  imgContainer  gt     lt img src  imageSrc    gt   lt  div gt    The containing div with essentially crop the image by hiding the overflow

User · Answer

You could use a combination of both methods eg    x000D   x000D       crop   x000D          width  200px  x000D          height  150px  x000D          overflow  hidden  x000D        x000D   x000D       crop img   x000D          width  400px  x000D          height  300px  x000D          margin  -75px 0 0 -100px  x000D        x000D       lt div class  crop  gt  x000D           lt img src  https   i stack imgur com wPh0S jpg  alt  Donald Duck  gt  x000D       lt  div gt  x000D   x000D   x000D    You can use negative margin to move the image around within the  lt div  gt

User · Answer

img       position  absolute      clip  rect 0px 60px 200px 0px

User · Answer

You can put the img tag in a div tag and do both  but I would recommend against scaling images in the browser   It does a lousy job most of the time because browsers have very simplistic scaling algorithms   Better to do your scaling in Photoshop or ImageMagick first  then serve it up to the client nice and pretty

User · Answer

Try using the clip-path property      The clip-path property lets you clip an element to a basic shape or to   an SVG source       Note  The clip-path property will replace the deprecated clip   property     x000D   x000D  img   x000D    width  150px  x000D    clip-path  inset 30px 35px   x000D    x000D   lt img src  http   i stack imgur com wPh0S jpg  gt  x000D   x000D   x000D    More examples here

User · Answer

In the crop class  place the image size that you want to appear    crop       width  282px      height  282px      overflow  hidden     crop span img       background-position  center      background-size  cover      height  282px      display  block      The html will look like    lt div class  crop  gt       lt span class  img  style  background-image url  http   url to image image jpg     gt  lt  span gt   lt  div gt

User · Answer

Thanks sanchothefat   I have an improvement to your answer  As crop is very tailored for every image  this definitions should be at the HTML instead of CSS    lt div style  overflow hidden   gt      lt img src  img jpg  alt    style  margin -30  0px -10  0px     gt   lt  div gt

User · Answer

You can use Kodem s Image Resize Service  You can resize any image with just a http call  Can be used casually in the browser or used in your production app    Upload the image somewhere you prefer  S3  imgur etc   Plug it into your dedicated API url  from our dashboard

User · Answer

img     position  absolute    clip  rect 0px  140px  140px  0px          lt img src  w3css gif  width  100  height  140    gt

User · Answer

img     position  absolute    clip  rect 0px  140px  140px  0px          lt img src  w3css gif  width  100  height  140    gt

User · Answer

In the crop class  place the image size that you want to appear    crop       width  282px      height  282px      overflow  hidden     crop span img       background-position  center      background-size  cover      height  282px      display  block      The html will look like    lt div class  crop  gt       lt span class  img  style  background-image url  http   url to image image jpg     gt  lt  span gt   lt  div gt

User · Answer

If you are using Bootstrap  try using    background-size  cover    for the  lt div gt  maybe give the div a class say  lt div class  example  style url     your image jpeg    gt  so it becomes  div example  background-size  cover

User · Answer

What I ve done is to create a server side script that will resize and crop a picture on the server end so it ll send less data across the interweb   It s fairly trivial  but if anyone is interested  I can dig up and post the code  asp net

[html] CSS Display an Image Resized and Cropped

Examples related to html

Examples related to css

Examples related to background-image

Examples related to image