3

I want to display images in a 144px x 144px div element. Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.

How can I do this and have it work on older browsers like IE as well?

EDIT:
Changed the image, the first was wrong, sorry. Resize the image so that inside the div there is no space without image
enter image description here

Brian Webster
  • 30,033
  • 48
  • 152
  • 225
Francisc
  • 77,430
  • 63
  • 180
  • 276

5 Answers5

2

Set only the width of the image to 144px in CSS or in the attribute. The height will scale automatically. I'm fairly certain this works as low as IE 6. I'm not certain about anything older than that.

Cfreak
  • 19,191
  • 6
  • 49
  • 60
  • Good idea, but that will be letterbox scaling and it would require JavaScript to compute the bigger side. I need a JS-free solution. – Francisc Aug 17 '11 at 14:04
  • No. This solution does not require javascript. The browsers compute this automatically. You could alternatively set the height instead of the width and it will do the same thing. I'm really not sure what you mean by "letterbox scaling". Your box is a square. – Cfreak Aug 17 '11 at 14:14
  • But upon seeing your example I see you're not really after what I was thinking. I think you would need multiple divs as Jeffrey Blake is suggesting in his answer. – Cfreak Aug 17 '11 at 14:17
2

If I read your question right, you aren't trying to resize the image, but rather to actually cut off part of the image. If you just want to resize the image, then follow the other answers about that.

The simplest way I can think of to actually cut off the image this is to add <div class='blockOut'>&nbsp;</div> and then use CSS to place & size the div, make it's color match the background color of your page, and put it in front of the image. Example CSS:

.blockOut {
  position: relative;
  top: -100px;
  left: 100px;
  background-color: white;
  z-index: 2; //this is the important part for putting this div in front of the other one
}

Edit: Note that since you added an example showing that you want all sides blacked out, this would require separate divs for blacking out the top, each side, and the bottom. Also, if you want part of the image to show through (as it does in your example) you can use CSS transparency options.

Jeffrey Blake
  • 9,659
  • 6
  • 43
  • 65
  • Just the visible part is visible. There's no blacking out. I think clipping is the word for this, but not sure. background-clip would be nice, but IE6 doesn't know it. – Francisc Aug 17 '11 at 14:11
  • Note that I have done similar things in all major browsers back to IE6. – Jeffrey Blake Aug 17 '11 at 14:12
2
div{height:114px;width:114px;overflow:hidden;}
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}

that is masking to only show a part of the img, as you say in the title. but in the description says you want to resize the img. decide yuorself

Einacio
  • 3,502
  • 1
  • 17
  • 21
2

My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.

Here's an example:

HTML (copy and paste into your own file for a full test): 

<html>
<head>
<style type="text/css">
.clippedImg {
  background-image: url("http://www.grinderschool.com/images/top_main.jpg");
  background-position: -75px -55px;
  height: 100px;
  width: 235px;
}
</style>
</head>
<body>
<div class='clippedImg'>&nbsp;</div>
</body>
</html>

CSS (this is really the key):

 .clippedImg {
    background-image: url("http://www.grinderschool.com/images/top_main.jpg");
    background-position: -75px -55px;
 }

You can adjust the position numbers to get exactly the portion and size of the image that you want.

Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:

<div class='blackBox'>
    <div class='clippedImg'>&nbsp;</div>
<div>

With a padding and width set to create the black-box effect you want:

.blackBox {
    background-color: black;
    padding: 0 20px;
    width: 235px;
}
Community
  • 1
  • 1
Jeffrey Blake
  • 9,659
  • 6
  • 43
  • 65
  • Don't. I know what you mean, that is not what I need. Thanks though. – Francisc Aug 17 '11 at 14:24
  • The example before was pretty crappy because I wasn't using real images so the dimensions were all messed up. I really think this will do what you're looking for. Try starting with what's there now! Look at http://www.grinderschool.com/images/top_main.jpg and compare to what you see when you save the above HTML into a local file on your machine. You'll see that I selected only a small section of the image to be shown. – Jeffrey Blake Aug 17 '11 at 14:45
  • Arg! Adjusted again. Playing around too much in Firebug and then not copying all the adjustments really messes you up! Now it will properly set the height and width, which is key to what you're wanting. – Jeffrey Blake Aug 17 '11 at 15:00
  • The only problem is it will not scale the background image. – Francisc Aug 17 '11 at 15:03
  • I don't believe that scaling is supported with the background image CSS property. To support that you might have to go with my other suggestion and combine that with HTML's height/width properties (on the img element). – Jeffrey Blake Aug 17 '11 at 15:10
0

to do what you want with css, you should use max-height:144px;max-width:144px. but ie6 doesn't implements those simple properties, so you'll have to use js

Einacio
  • 3,502
  • 1
  • 17
  • 21