CSS - Cut image without resizing?

Question

For example I have a big image 500x500 and I have a small square 100x100.

I don't want the big image to resize, so how could I show it cutted?

If I risize, it would stay like this:

|-------|
|-------|
|-------|
|-------|

If I cut it, only the bold thing would happear:

|---- ---|
|---- ---|
|-------|
|-------|

Answer 1

If you want, you can use background-image property using CSS, and than use background-position to set the image accordingly

Assuming you have an element of say, 100px x 100px and an image with dimensions 300px x 300px

HTML

<div class="demo"></div>

CSS

div.demo {
   background-image: url('PATH_TO_IMAGE');
   background-position: 30px 100px; 
   background-repeat: no-repeat; /* Just to be sure it won't repeat, 
                                    even if you resize the element*/
   /* 30px - X Axis, 100px - Y Axis */
}

Answer 2

easy way to do this is

html :

<div id="myimg"></div>

CSS :

 #myimg{
        backgroung-image: url("myimg.png");
        background-repeat: no-repeat;
    }

Answer 3

may i sure try this html source

<div class="cropimg">
    <img src="..." alt="..." />
</div>

try this css source :

.cropimg{
    width: 100px ;
    height: 100px;
    overflow: hidden;
    background-color:blue;
}

.cropimg img {
    width: 500px;
    height: 500px;
    margin: -75px 0 0 -100px;
    background-color:red;
}

Answer 4

You can give the width and height for that image

Example:

div.img{
        width:100px;
        height:100px;
        padding:0px;
        margin:0px;
        }

Answer 5

You can apply your image as a background to some element, and fix width/height of that element.

Demo

#pic {
    background: url('pic_url');
    width: 300px;
    height: 200px;
}