Create Images With the Same Dimensions Without Using Pixel Height and Width

HTML & CSS
1

My web page does not use pixels to define the width and height and instead uses percentage. I have a table with three rows and three columns. The first table cell of each row contains a Div and in each Div of each table row there is an image. The images display just fine except for a small problem and that is each image has a different height. That means the height of each table row and Div are only as high as the image the Div contains.

I suspect this happens because I dimensioned the table and its cells using percent. I noticed that the width of the td element works but the height of the td element doesn’t seem to work. I would like to place an image of any size into any of the rows and have CSS force all of the images to be displayed with the same height and width without using pixel width or height.

2

Can you supply the script or a link to the page?

3

Here are snippets of my markup and styles:

 <head><style>
    html, body { padding: 0; margin: 0;  width: 100%; height: 100%; }
    table{margin:0 auto; width:18.5%; height:40.5%; border:solid gray 1px;}
    td{width:33.3333%; height:33.333%; border:solid gray 1px; text-align:center;}
    img{height:100%; width:100%; display:block;}
 </style></head>
<body> 
<table>
 <tr>
    <td class="column1"><div class="pic"><img src="pic1.jpg" alt="pic1" /></div></td>
    <td>test</td> <td>test</td>
 </tr>
 <tr>
    <td class="column1"><div class="pic"><img src="pic2.jpg" alt="pic2" /></div></td>
    <td>test</td> <td>test</td>
 </tr>
 <tr>
    <td class="column1"><div class="pic"><img src="pic3.jpg" alt="pic3" /></div></td>
    <td>test</td> <td>test</td>
 </tr></table></body>
4

If the images have varying aspect ratios then some cropping must occur. This can be done using the object-fit property, though that does not have IE support.

There are workarounds and polyfill that can emulate the effect in unsupporting browsers, or you could just accept that IE users will have to slum-it with a less than perfect layout.

1 Like
5

You could also get all the images the same size ratio before uploading; either by cropping them or padding.

2 Likes
6

Assuming you have a need for a table the i would use object-fit with a fallback method for older browsers like this:

However your percentages seem much too small to be of any practical use so I guess they were just for example.

Also you don’t say what should happen when the text to the side of the image runs to more lines than the 33% height. If its only one word like your example that that should be ok but generally you should test with extravagant data to show up any problems straight away.

The above layout could be achieved without using the html table element if the data is not tabular.

7

Hi there oangodd,

here is a CSS flex example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">

html, body {  
    width: 100%; 
    height: 100%; 
    margin: 0; 
    background-color: #f0f0f0;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

.container {
    position: relative;
    display: block;
    width: 16em;
    height: 16em;
    padding: 0.15em 0.1em;
    margin: auto;
    top: 1em;
    background-color: #fff;
    border: 1px solid #999;
 }

.row {
    display: flex;
    height: 33.333%;
 }

.row div { 
    width: 32.333%;
    height: 99%;   
    margin: 0.5%;
    border: 1px solid #999; 
    box-sizing: border-box;
    text-align: center; 
    overflow: auto;
    line-height: 5em;
 }

.center {
   height: 32.333%;
   margin: 0.5% 0;
}

.row  img {
    display: block;
    width: 100%; 
    height: 100%; 
 }

</style>

</head>
<body> 

<div class="container">

 <div class="row">
  <div>
   <img src="http://placehold.it/324x200/0ff/000" width="324" height="200" alt="pic1">
  </div>
  <div>test</div> 
  <div>test</div>
 </div>

 <div class="row center">
  <div>
   <img src="http://placehold.it/800x800/000/fff" width="800" height="800" alt="pic2">
  </div>
  <div>test</div>
  <div>test</div>
 </div>

 <div class="row">
  <div>
   <img src="http://placehold.it/1600x1000/f0f/000" width="1600" height="1000" alt="pic3">
  </div>
  <div>test</div> 
  <div>test</div>
 </div>

<!-- .container --></div>

</body>
</html>

coothead

2 Likes
8

That’s the way I would have approached it apart from one small point. :slight_smile:

The aspect ratio of the image is not maintained and the images are just squashed into place. You can fix it for modern browsers (excluding ie and edge) using object-fit.

e.g.

.row img {
    object-fit: cover;
 }

Of course I may be wrong in my assumptions that aspect ratio needs to be maintained and in which case don’t add the object-fit :slight_smile:

2 Likes
9

Hi there Paul,

the OP never mentioned aspect ratio, so I did
not bother about it. :winky:

If he had, then I would’ve probably gone with
background-image instead.

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">

html, body {  
    width: 100%; 
    height: 100%; 
    margin: 0; 
    background-color: #f0f0f0;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

.container {
    position: relative;
    display: block;
    width: 16em;
    padding: 0.15em 0.1em;
    margin: auto;
    top: 1em;
    background-color: #fff;
    border: 1px solid #999;
 }

.row {
    display: flex;
    height: 5.2em;
 }

.row div { 
    width: 32.333%;  
    margin: 0.5%;
    border: 1px solid #999; 
    box-sizing: border-box;
    text-align: center; 
    overflow: auto;
    line-height: 5em;
 }

.center {
   margin: 0.5% 0;
}

.row  div:first-of-type {
    background-size: cover;
 }

.row:nth-of-type(1) div:first-of-type{
    background-image:url(http://placehold.it/324x200/0ff/000);

 }

.row:nth-of-type(2) div:first-of-type{
    background-image:url(http://placehold.it/800x800/000/fff);

 }

.row:nth-of-type(3) div:first-of-type{
    background-image:url(http://placehold.it/1600x1000/f0f/000);
 }

</style>

</head>
<body> 

<div class="container">

 <div class="row">
  <div></div>
  <div>test</div> 
  <div>test</div>
 </div>

 <div class="row center">
  <div></div>
  <div>test</div>
  <div>test</div>
 </div>

 <div class="row">
  <div></div>
  <div>test</div> 
  <div>test</div>
 </div>

<!-- .container --></div>

</body>
</html>

coothead

1 Like
10

Thank you all for responding. I will look at all of your suggestions and see which one works best for what I need.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.