why using tables?
Just do this:
HTML:
<div class="frame">
<img src="https://1eican1u2cuw7g1kw7btt2xy-wpengine.netdna-ssl.com/wp-
content/uploads/personal-attention-vamospanish-85x85.png"/>
</div>
CSS:
.frame {
height: 160px; /*can be anything*/
width: 160px; /*can be anything*/
position: relative;
border:soild;
background-color:red;
}
img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
**matejkramny's solution is a good start, but oversized images have a wrong ratio.**<br>
Here's my fork:
demo: https://jsbin.com/lidebapomi/edit?html,css,output
<hr>
HTML:
<div class="frame">
<img src="foo"/>
</div>
CSS:
.frame {
height: 160px; /*can be anything*/
width: 160px; /*can be anything*/
position: relative;
}
img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
