How to Scale an Image Proportionally Within a Table Cell of a Fixed Size

How to scale down an image in a flexible table cell to dimensions of window?

Edit: it's only about height so inline-block or float will be efficient :

html, body, .parent {
    height: 100%;
    margin:0;
}
.parent {
    white-space : nowrap;
}
.parent > div {
    display:inline-block;
    height: 100%;
    vertical-align:top;
    ;
}
img {
    height: 100%;
    max-height: 100%;
}

See http://jsfiddle.net/53ySr/6/
note the simpliest is http://codepen.io/gc-nomade/pen/vGhbf (no div.right nor div.left)

this was first version shrinking within window's width for those who are curious :
using display:table, you need table-layout to control width, that helps .
see http://jsfiddle.net/53ySr/2/ jsfiddle.net/53ySr/3/

html, body {
    width: 100%;
    height: 100%;
}

.parent{
    display: table;
    height: 100%;
    table-layout:fixed;
    width: 100%;
}

.parent > div{
    display: table-cell;
    height: 100%;
    width: 50%;
    background:#233C40;
}
img {
    width:  100%;
    height:100%;/* you can remove this */
    max-height: 100%;
}

Table 100% width and height, and image to scale proportionally with css

if image is set in absolute position , html table or flex box would do the job:

table

html,body,table {  height: 100%;  width: 100%;  margin: 0;  background-color: rgb(148, 0, 211);  text-align: center;  /* for table */  table-layout: fixed;  border-collapse: collapse;}
td {  padding: 10px;}
td.hide {/* do not remove or remove/update also colspan attribute else where */  width: 0;  padding:0;  overflow: hidden;}
img {  display: block;/* for the gap*/  margin: auto;}
.header_image {  height: 100px;/* your example */}
thead tr td,tfoot tr td {  height: 0;/* no worry it will expand */}
tbody {  position: relative;  /* also uses height left avalaible */}
.main_image {  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  max-height: 100%;  max-width: 100%;}
.text {  font-size: 50px;  font-family: sans-serif;  letter-spacing: -4px;  margin: 0 20px;}

<table>  <thead>    <tr>      <td class="hide"><img class="header_image" src="https://dummyimage.com/400" /></td>      <td><img class="header_image" src="https://dummyimage.com/2254x1860" /></td>    </tr>  </thead>  <tfoot>    <tr>      <td colspan="2"> <span class="text">some text</span></td>    </tr>  </tfoot>  <tbody>    <tr>      <td colspan="2">        <img class="main_image" src="https://dummyimage.com/1600">      </td>    </tr>  </tbody></table>

Scaling image inside td tag?

Here is a proof-of-concept that might work.

I set the height and width of the table cell (in my example, a 2x2 grid),
and then within each table cell I place a div with overflow: hidden.

I then set the width of the image to 100% and any excess height will be
clipped by the div element.

I assumed that the image was a portrait type. In some cases, for large enough
screens, there may be enough space in the table to show the entire image.

table {  table-layout: fixed;  border-spacing: 0;  border-collapse: collapse;}td {  height: 50vh;  width: 50vw;  padding: 0;}td div {  border: 1px dotted gray;  height: inherit;  width: inherit;  overflow: hidden;  box-sizing: border-box;}td div img {  width: 100%;}body {  margin: 0;}

<table cell-spacing=0>  <tr>    <td><div>one</div></td>    <td><div>three</div></td>  </tr>  <tr>    <td><div>two</div></td>    <td><div><img src="https://picsum.photos/400/600/"></div></td>  </tr></table>

Image no longer responsive as put in table cell layout

How about dropping that "CSS-table" stuff and doing it a bit easier?

<div style="width:auto;height:auto;margin:25%;text-align:center;vertical-align:middle">
     <img src="URL">
</div>

At least, that’s how I would handle it...

EDIT:

Please note that I've put the CSS inline to show you what element should get what style. In production, you should — as a comment to this answer correctly stated — always separate style from code like. So, practically, you'll end up with something like this:

<style>
.centerimg {
    width:auto;
    height:auto;
    margin:25%;
    text-align:center;
    vertical-align:middle
}
</style>

...

<div class="centerimg">
    <img src="#">
</div>

EDIT 2:

Replying to the related comment, here's the update to make the image fit it's parent proportionally:

If your image has a bigger width than height...

<style>
...
img{
   max-width:100%;
   height:auto
}
</style>

or, if your image has a smaller width than height...

<style>
...
img{
   max-height:100%;
   width:auto
}
</style>

EDIT 3:

Looking at your fiddle, I came up with this which works like you want it to work:

<style>
*{
width:100%;
height:100%;
margin:0;
text-align:center;
vertical-align:middle
}

img{
width:auto;
height:100%;
}
</style>

I've forked your fiddle to show the updates: http://jsfiddle.net/LPrkb/1/

EDIT 3:

As the OP doesn't seem to be able to decide what he needs, I'm adding this final edit due to his latest comment.

You could also use a CSS background-image with "background-size:contain" on the "mainContainer" and be done with it... check http://jsfiddle.net/HGpfJ/2/ or look at this 100% working example taking a completely different approach which results in just the same effect/functionality:

<!DOCTYPE HTML>
<html itemscope="itemscope" itemtype="http://schema.org/WebPage">
<head>
<title>Example</title>
<style>
html,body{width:100%;height:100%;margin:0;padding:0}
#centerimg{
width:100%;
height:100%;
background:transparent url(http://oi42.tinypic.com/v9g8i.jpg) no-repeat scroll center;
background-size:contain;
}
</style>
<body>
<div id="centerimg"></div>
</body>
</html>

Let's face the facts: depending on where in the document structure you want to have the image "centered", there are more than a dozen of ways to do it.

If OP needs specific code, we will need the complete document structure from OP and not simply a "generalized" code-snippet which could be anywhere in whatever document structure.

How to Scale an Image Proportionally Within a Table Cell of a Fixed Size

How to scale down an image in a flexible table cell to dimensions of window?

Table 100% width and height, and image to scale proportionally with css

Scaling image inside td tag?

Image no longer responsive as put in table cell layout

Related Topics

Leave a reply