CODEWITHSUNDEEP
jqueryhtmlcssimage
Awan
Awan

Reputation: 18580

How to display a image in div without resizing it

I have a div of 160x160 pixels. I want to display image in this div. I want to show image in div without resizing it.

This div is like a window in real world. You can see view from that window according to size of window.

I think you can understand this?

Thanks

Upvotes: 1

Views: 27888

Answers (6)

Alon
Alon

Reputation: 801

My take on this, you don't need to know the width of the image using transform / top / left:

<div style=" overflow: hidden; width: 160px; height: 160px">
  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' style="position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%)"/>
</div>

Upvotes: 0

Vijay Sarin
Vijay Sarin

Reputation: 1336

I think this is what you need.....

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #imageLoader{
                border:1px solid #B0B0B0;
                height:160px;
                width:160px;
                background-image: url('images/Science.png');
                background-position:center center;
                background-repeat:no-repeat;
                background-clip:content-box;
            }
        </style>
    </head>
    <body>
        <div id="imageLoader" style="">
        </div>
    </body>
</html>

Change Image Names Accordingly...

Here is my Fiddle

Upvotes: 1

zenkaty
zenkaty

Reputation: 1548

Just use a simple background image like this:

div {background:url(image.jpg) 50% 50% no-repeat; height:160px; width:160px}

If you want to use an actual <img> you could do this:

<div><img src="image.jpg" /></div>​​​​​​​​​​​​​

div {position:relative; text-align:center; overflow:hidden; height:160px; width:160px}
img {position:absolute; left:50%; margin-left:-250px}​

Where margin-left is half the image width - only works when you know the image size ahead of time. You could grab the image size and do this with JavaScript if you don't know it?

Upvotes: 7

Peon
Peon

Reputation: 8020

You can also set the image as background

background: url('image.png') no-repeat center center;

Here is an example: http://jsfiddle.net/H5U3H/

Upvotes: 1

Brentoe
Brentoe

Reputation: 448

The best way to do this is to set the image as the background image of the div.

div { 
    background: transparent url(path/to/image.jpg) no-repeat center 0; 
    width: 160px; 
    height: 160px; 
}

That will center the image if it is bigger than the div, otherwise it will display the image in the (horizontal) center of the div.

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

<div><img src="yourimage.jpg" /></div>

div{width:auto; margin:0 auto}
div img{max-width:100%}

max-width takes the max width as the original size of the image. Even ig you resize the window also you can see the effect with smaller image.

Upvotes: 3

Related Questions