make larger images fit in a div

@rkhan19Dec 14.2009

Hi
I have a div on the right hand side of my page which displays text and pictures. Some of the pictures are bigger than the div and stretch out the div. I added max-width and a workaround for IE which stops the div from getting bigger but now the images are coming out of the div border.

Is it possible to make everything fit inside the div even if it is bigger than the space in the div???

I can provide the css if it would help.

to post a comment

CSS

@FangDec 14.2009 — #Define the images widths as a percentage.

&lt;div id="container"&gt;
 &lt;img alt="image" src="image1.jpg" width="60&amp;#37;"&gt;
 &lt;img alt="image" src="image2.jpg" width="60%"&gt;
 &lt;/div&gt;

@ArtphotoasiADec 14.2009 — #Hi

Is it possible to make everything fit inside the div even if it is bigger than the space in the div??? .[/QUOTE]

welcome in the css world!!!

always use sizes!!! never use height if you can!!! my 2 cents roules ?

by the way....... yes whatever is in a div will strech the div if bigger ...... or will come out........ the only way is give to the content of the div a size h/w using %

@rkhan19authorDec 15.2009 — #Thank for the help Fang and ArtphotoasiA.

Fang its hard to explain but for some reason I dont have access to the pictures. I am displaying something which has av variety of content. Sometimes it may have one picture, sometimes 2 and sometimes no picture. So what I need is something that fits everything in the div.

welcome in the css world!!!

the only way is give to the content of the div a size h/w using %[/QUOTE]

ArtphotoasiA can you please expand on this??

@ArtphotoasiADec 15.2009 — #what i meant is that you must think to a div like a box.... not a tag table.... like was with old style design.... so... if you have a div with size let say 100px 100px you can put an image inside the div........ using a clas for the image ..... and [U]in the CSS class [/U]definition you can use width 80% height 80% in this way you will have an image 80px by 80px

[CODE].imgpic
 {
 border: #660033 solid 1px;
 width:80%;
 height:80%;
 }[/CODE]

[CODE]<div>
 <img src="img.jpg" alt=" " class="imgpic"/>
 </div>[/CODE]

of course your div must be empty....... if in the box you have soemthing else (esample another img) 80% will be the 80% of the available space....

regards

make larger images fit in a div

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

make larger images fit in a div

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴