CODEWITHSUNDEEP
javascripthtmlcssimageresize
John Balls
John Balls

Reputation: 11

CSS - Cut image without resizing?

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:

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

Upvotes: 0

Views: 1844

Answers (5)

jackchuka
jackchuka

Reputation: 72

easy way to do this is

html :

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

CSS :

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

Upvotes: 2

mishik
mishik

Reputation: 10003

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

Upvotes: 0

manoranjani.a
manoranjani.a

Reputation: 45

You can give the width and height for that image

Example:

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

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

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

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157314

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 */
}

Upvotes: 3

Related Questions