How come the 1st img code is smaller than the 2nd code, and what's the difference?

[asasass]

How come 40% scales differently in both codes, and is one more correct than the other?

I’m thinking, the 40% on the 2nd code, is how it should look, but then, how would you get the 1st code to scale as the 2nd code does?

Wait, or maybe I’m wrong about that.

1st Code:

Edit fiddle - JSFiddle - Code Playground

<style>

html,body {
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;
 
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;

}


</style>


<div class='outer'>
  <div class='tcell'>

   <a href="https://www.google.com"> <img src="http://i.imgur.com/eMXhOn7.png" style="width: 40%"  >
</a>

  </div>
</div>

2nd Code:

Edit fiddle - JSFiddle - Code Playground

<a href="https://www.google.com"> <img src="http://i.imgur.com/eMXhOn7.png" style="width: 40%">
</a>

[SamA74]

A percentage value on any element refers to a percentage if the size of its parent element.
In the first case the parent element is styled as a table-cell within a table.
In the second the parent element is the whole body of the page, so scales to 40% of the whole page.

So why does it not scale the same within the table?
By default tables are scaled to only accommodate their content. So the child element defines the size of the parent. But with the 40% you are trying to do the opposite, scale the child according to the parent, which should be scaled according to the child. This is a dependency loop, so cannot work. The result is the image does not scale above its native pixel size and the 40% scaling only occurs when the viewport is too small for the image to be native size.

To alter this you must change the default behaviour of the table styled element by defining a width for it, instead of letting its width be defined by its content.

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%; /* Width defined */
}