Clip images with HTML and CSS

问题

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

回答1:

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

回答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.

回答3:

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'> </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.

回答4:

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

回答5:

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

来源：https://stackoverflow.com/questions/7094023/clip-images-with-html-and-css

标签

html

css

image

clip