CSS Display an Image Resized and Cropped

DK39_41385 0
Viewed 908514

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:

enter image description here


Has the size 800x600 pixels and I want to show like an image of 200x100 pixels


With img I can resize the image 200x150px:

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


That gives me this:

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


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

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

Gives me:

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


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

background-image css image html
21 Answers

You could use a combination of both methods eg.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }
    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

You can use negative margin to move the image around within the <div/>.

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

<div class="imgContainer">
  <img src="imageSrc" />
</div>

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

Kelly_Anderson_591250

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.

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

object-fit may help you, if you're playing with <img> 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_29272280

A small addition to the previous answers that includes object-fit: cover:

object-position

You can alter the alignment of the replaced element's content object within the element's box using the object-position property.

.trimmed-cover {
  object-fit: cover;
  width: 100%;
  height: 177px;
  object-position: center 40%;
}
<img class="trimmed-cover" src="http://i.stack.imgur.com/wPh0S.jpg">

result.gif

user_2602290

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.

img {
  width: 150px;
  clip-path: inset(30px 35px);
}
<img src="http://i.stack.imgur.com/wPh0S.jpg">

More examples here.

user_97539850

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.

Dave_M_249950

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_583040

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…

  1. Set the height = 172 + 19 = 191 pixels:

    height=191

  2. Set the bottom margin to -19 pixels (shortening the image to 172 pixels high):

    margin-bottom:-19px

  3. Set the top position to -19 pixels (shifting the image up, so that the top 19 pixel rows overflow & are hidden instead of the bottom ones):

    top:-19px

The resulting HTML looks like this:

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

As you can see, I chose to style the containing <a> tag, but you could style a <div>, 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_5628620

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_43355880

You can also use a tool called Croppie that can crop images...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://foliotek.github.io/Croppie/croppie.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="https://foliotek.github.io/Croppie/croppie.js"> </script>
<script src="https://foliotek.github.io/Croppie/bower_components/exif-js/exif.js"> </script>

<style>
    #page {
        background: #ffffff;
        padding: 20px;
        margin: 20px;
    }

    #demo-basic {
        width: 600px;
        height: 600px;
    }
</style>
</head>
<body>
<h1>Crop Image Demo</h1>
<input id="upload" type="file" />
<br />
<div id="page">
<div id="demo-basic"></div>
</div>

<input id="upload-result" type="button" value="Crop Image"/>
<br />
<img id="cropped-result" src=""/>

<script>
    var $uploadCrop;       

    $("#upload").on("change", function () { readFile(this); show(); });

    $("#upload-result").on("click", function (ev) {
        $uploadCrop.croppie("result", {
            type: "canvas",
            size: "viewport"
        }).then(function (resp) {
            $("#cropped-result").attr("src", resp);
        });
    });

    function show() {
        $uploadCrop = $("#demo-basic").croppie({
            viewport: { width: 100, height: 100 },
            boundary: { width: 300, height: 300 },
            enableResize: true,
            enableOrientation: true,
            mouseWheelZoom: 'ctrl',
            enableExif: true
        });
    }

    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
        
            reader.onload = function (e) {
                $("#demo-basic").addClass("ready");
                $uploadCrop.croppie("bind", {
                    url: e.target.result
                }).then(function () {
                    console.log("jQuery bind complete");
                });
            
            }
        
            reader.readAsDataURL(input.files[0]);
        }
        else {
            alert("Sorry - you're browser doesn't support the FileReader API");
        }
    }
</script>
</body>
</html>
user_147779610
Related