CODEWITHSUNDEEP
javascripthtmlcssimage
Matt_
Matt_

Reputation: 43

Scaling images in HTML using CSS

I'm trying to create a HTML page that can be re sized to most modern resolutions, I'm using % for all my div containers and they are scaling nicely but I have images in these containers and they are staying the same size.

I don't want the images to lose their aspect ratio but I need them to re size to fit in the containers. My example works fine on a 4:3 ratio screen but on a widescreen the images are being cut off. The image I'm using is 213px wide x 300px high. If I have to use js to solve then that's ok.

<div style="position:fixed;top:2%;left:2%;overflow:hidden;height:38%;width:12%;text-align:center;border:.15em solid #000;">
   <div style="padding:1% 1% 5% 1%;font-size:90%;font-family:'trebuchet MS', verdana, arial, sans-serif;color:#000;"><b>TEST</b></div>

   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
</div>

Upvotes: 0

Views: 1045

Answers (6)

Matt_
Matt_

Reputation: 43

I managed to solve this one myself, I give the container div a height and width then all other divs and images below only get a height, this makes the screen size dynamic, I had to use display:-moz-inline-block to get the images to centre in the container div. Check it out http://jsfiddle.net/mb5T4/2/ re size the result screen into a typical ratio (4:3, 5:4, 16:9) and all the images resize in the div.

Upvotes: 0

cgvector
cgvector

Reputation: 929

remove height from first line....

Upvotes: 0

cgvector
cgvector

Reputation: 929

check this

<div style="position:fixed;top:2%;left:2%;overflow:hidden;height:38%;width:12%;text-align:center;border:.15em solid #000;">
  <div style="padding:1% 1% 5% 1%;font-size:90%;font-family:'trebuchet MS', verdana, arial, sans-serif;color:#000;"><b>TEST</b></div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
</div>

Upvotes: 0

HGK
HGK

Reputation: 386

You can use JQuery Resiable : JQuery UI Resizable

$(selector).resizable(...);

There is multiple examples.

Upvotes: 0

cgvector
cgvector

Reputation: 929

if you want to use 1 image in a row then you should code like below.

<div style="position:fixed;top:2%;left:2%;overflow:hidden;height:38%;width:12%;text-align:center;border:.15em solid #000;">
  <div style="padding:1% 1% 5% 1%;font-size:90%;font-family:'trebuchet MS', verdana, arial, sans-serif;color:#000;"><b>TEST</b></div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
</div>

Upvotes: 0

Joseph
Joseph

Reputation: 119827

I think I have a post about preserving HTML aspect ratio, try giving this a shot:

HTML:

<div id="container">                      <!--base wrapper-->
    <div id="vertical"></div>             <!--flexible vertical component-->
    <div id="ratioElement">content</div>  <!--fit to wrapper element-->
</div>

CSS:

#container{
    position:relative;
    width:100%;
    float:left;
}

#vertical{
    margin-top:50%;     /* 2:1 ratio (#container width : #vertical height) */
}

#ratioElement{          
    position:absolute;  /*this would be the <img>*/
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#069;
}

Upvotes: 1

Related Questions