Clip Images With Html And Css

December 22, 2023 Post a Comment

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

Solution 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><styletype="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><divclass='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:

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

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

.blackBox {
    background-color: black;
    padding: 020px;
    width: 235px;
}

Solution 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.

Baca Juga

Solution 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.

Solution 4:

div{height:114px;width:114px;overflow:hidden;}
divimg{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

Solution 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

Html5 Dictionary