CSS Display an Image Resized and Cropped

CSS Display an Image Resized and Cropped

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:

That gives me this:

And with background-image I can cut the image 200x100 pixels.

Gives me:

How can I do both?
Resize the image and then cut it the size I want?

Answer by Dave Markle for CSS Display an Image Resized and Cropped

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.

Answer by sanchothefat for CSS Display an Image Resized and Cropped

You could use a combination of both methods eg.

CSS:

.crop {      width: 200px;      height: 150px;      overflow: hidden;  }    .crop img {      width: 400px;      height: 300px;      margin: -75px 0 0 -100px;  }  

You can use negative margin to move the image around within the

.

Answer by Kelly Anderson for CSS Display an Image Resized and Cropped

.imgContainer {    overflow: hidden;    width: 200px;    height: 100px;  }  .imgContainer img {    width: 200px;    height: 120px;  }  

The containing div with essentially crop the image by hiding the overflow.

Answer by Rob for CSS Display an Image Resized and Cropped

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)

Answer by Joel Purra for CSS Display an Image Resized and Cropped

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

and clips the excess (depending on the ratio).

.with-bg-size {    background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg');    width: 200px;    height: 100px;    background-position: center;    /* Make the background image cover the area of the 
, and clip the excess */    background-size: cover;  }  

Donald Duck!
  

css3 background-image background-size

Answer by ralgh for CSS Display an Image Resized and Cropped

Try this: http://dabblet.com/gist/4711695

Centers image vertically in its container. No JavaScript needed.

Answer by Sergey Chechaev for CSS Display an Image Resized and Cropped

---

.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;  }  

Answer by Pedro Reis for CSS Display an Image Resized and Cropped

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.

Answer by Krone for CSS Display an Image Resized and Cropped

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

Answer by Rohit Chaudhary for CSS Display an Image Resized and Cropped

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

Answer by Anatolii Stepaniuk for CSS Display an Image Resized and Cropped

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

Answer by 151291 for CSS Display an Image Resized and Cropped

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

Answer by Deivide for CSS Display an Image Resized and Cropped

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:

Answer by Rafee Muhammad for CSS Display an Image Resized and Cropped

Live Example: https://jsfiddle.net/de4Lt57z/

HTML:

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/

Answer by user5313842 for CSS Display an Image Resized and Cropped

If you are using Bootstrap, try using { background-size: cover; } for the

maybe give the div a class say

so it becomes div.example{ background-size: cover}

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72