Home/ Questions/Q 7820403
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T07:16:25+00:00

I am trying to crop a (non background) image then scale that cropped image

  • 0

I am trying to crop a (non background) image then scale that cropped image by a percentage of the body. The idea I have is to combine all logos and basic graphics on my website into one image so that the browser can cache the image (quicker after the fist download). I then want to scale relative to the body width so that my website will look the same ratio of the page width no matter what the user’s monitor size.

This may be easier if I give the html & css then explain it after:

<html>
<head>
    <style>
    body
    {
        padding: 0px;
        margin: 0px;
        width: 100%
    }
    #crop1
    {
        float: left;
        overflow: hidden;
        border: 1px solid red;
        clear: both;
    }
    #crop1 img
    {
        vertical-align: middle;
        margin: -28px 0px -88px -189px; /*top right bottom left*/
    }
    #scale1
    {
        width: 10%;
        border: 1px solid blue;
    }
    #scale1 img
    {
        vertical-align: middle;
        width: 100%;
    }
    #crop2
    {
        float: left;
        overflow: hidden;
        border: 1px solid green;
        width: 100%;
    }
    #crop2 img
    {
        vertical-align: middle;
        margin: -28px 0px -88px -189px; /*top right bottom left*/
    }
    #scale2
    {
        width: 10%;
        border: 1px solid orange;
        clear: both;
    }
    </style>
</head>
<body>
    <img src="http://www.mathleague.com/help/geometry/IMG00088.gif">
    <div id="scale1"><img src="http://www.mathleague.com/help/geometry/IMG00088.gif"></div>
    <div id="crop1"><img src="http://www.mathleague.com/help/geometry/IMG00088.gif"></div>
    <div id="scale2"><div id="crop2"><img src="http://www.mathleague.com/help/geometry/IMG00088.gif"></div></div>
</body>
</html>

I’ve used the image http://www.mathleague.com/help/geometry/IMG00088.gif in this example. I’m not going to use this image in my website, but the principle will be the same.

So first I just put in the original image, unchanged, to give a size reference while debugging:

<img src="http://www.mathleague.com/help/geometry/IMG00088.gif">

Scaling a separate image down to 10% of the page width works fine:

<div id="scale1">
    <img src="http://www.mathleague.com/help/geometry/IMG00088.gif">
</div>

And cropping the image down to show just the oval shape also works fine:

<div id="crop1">
    <img src="http://www.mathleague.com/help/geometry/IMG00088.gif">
</div>

But I cannot shrink just the oval down to 10% of the page width:

<div id="scale2">
    <div id="crop2">
        <img src="http://www.mathleague.com/help/geometry/IMG00088.gif">
    </div>
</div>

(This crops the oval down to the 10% width, instead of scaling it). Maybe I’m missing some simple css properties on this last line, or maybe I need to add more divs. I’m stuck.

Here is the example image:
Example image

note: the solution must be cross-browser compatible

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Updated with working example (margins needed to be percentage)

    To do it the way you are headed is going to be a bit more complex than you realize. For your final sizing, you need to readjust the img size based on the inverse of the percentage that the piece takes up on the whole. Then you have to take that and multiply it with the scaling to then multiply the offsets of your margins.

    EDIT The following code is far more exact, as I was able to check and correct my math, and calculate based off your easier image (knowing the size and offsets is critical). The new example gets far closer to correct sizing calculations. I’ve adjusted below to show the math. Come to find out, the calculation is “easier” than I thought, but what I partly failed to account for was that even the offsets top and bottom should be set off the original width of the image, since width is what is scaling the whole image.

    #scale1
{
    width: 10%;
    padding: 0;
    margin: 0;
}

#crop1
{
    overflow: hidden;
    border: 1px solid green;
    width: 100%;
    padding: 0;
    margin: 0;
}

/*Image: 300 W x 209 H
  Offsets: oT = 8, oR = 56, oB = 75, oL = 204
  Icon: 40 w x 126 h */

#crop1 img
{
    width: 750% /* 1 / (40 / 300) [inverse of icon width / image width] */;
    vertical-align: middle;
    /*using the offsets, each has a percentage calculated based solely off 
      the image width, then adjusted based off the width % of the img as 
      calculated above */
    margin: -20%    /* (8 / 300) x 7.5 [the 750%] = 100 x 8 / 40*/
            0       /* right margin seems unnecessary, but if found otherwise, the
                 calculation would be (56 /300) x 7.5 = 100 x 56 / 40*/
            -187.5% /* (75 /300) x 7.5  = 100 x 75 / 40*/
            -510%;  /* (204 / 300)  x 7.5  = 100 x 204 / 40*/
    padding: 0;
    border: 0;
}
    • 0