Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS scale down image to fit in containing div, without specifing original size

Tags:

html

css

scaling

I want to have a website where I can upload images of different sizes to be displayed in a jquery slider. I can't seem to fit (scaling down) the image in a containing div. Here's how I'm intending to do it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title>  <link rel="stylesheet" type="text/css" href="Imtest.css"/> </head>  <body>  <div id="wrapper">   <div id="im"><img src="Images/Scarpa2_1.jpg" /></div>  </div>   </body> </html> 

And the CSS

#wrapper {     width: 400px;     height: 400px;     border: 2px black solid;     margin: auto; }  #im {     max-width: 100%; } 

I've tried to set the max-width of my image to 100% in CSS. But that doens't work.

like image 642
Muteking Avatar asked Sep 04 '13 06:09

Muteking


People also ask

How do I autofit an image in a div?

To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.

How do I make an image fit a div without stretching CSS?

How to fit image without stretching and maintain aspect ratio? Answer: If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property. contain will give you a scaled-down image.

How do I stretch an image to fit in a div?

Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.


2 Answers

You can use a background image to accomplish this;

From MDN - Background Size: Contain:

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

Demo

CSS:

#im {     position: absolute;     top: 0;     left: 0;     right: 0;     bottom: 0;     background-image: url("path/to/img");     background-repeat: no-repeat;     background-size: contain; } 

HTML:

<div id="wrapper">     <div id="im">     </div> </div> 
like image 107
dc5 Avatar answered Oct 12 '22 10:10

dc5


This is an old question I know, but this is in the top five for several related Google searches. Here's the CSS-only solution without changing the images to background images:

width: auto; height: auto; max-width: MaxSize; max-height: MaxSize; 

"MaxSize" is a placeholder for whatever max-width and max-height you want to use, in pixels or percentage. auto will increase (or decrease) the width and height to occupy the space you specify with MaxSize. It will override any defaults for images you or the viewer's browser might have for images. I've found it's especially important on Android's Firefox. Pixels or percentages work for max size. With both the height and width set to auto, the aspect ratio of the original image will be retained.

If you want to fill the space entirely and don't mind the image being larger than its original size, change the two max-widths to min-width: 100% - this will make them completely occupy their space and maintain aspect ratio. You can see an example of this with a Twitter profile's background image.

like image 32
Woody Payne Avatar answered Oct 12 '22 11:10

Woody Payne