Better WordPress Post Image Display Using Block-Container And CSS3

Posted at

by default wordpress will used:
<a href="https://icompile.eladkarako.com/_uploads/2014/07/2014-07-27_134528.jpg">
<img style="width:100%" src="https://icompile.eladkarako.com/_uploads/2014/07/2014-07-27_134528.jpg" alt="2014-07-27_134528" width="1389" height="696" class="alignnone size-full wp-image-1646">
</a>





which will be shown like so:

2014-07-27_134528




by using the given class ".wp-image-1646"
you can generate a much better looking image, one that will fit (CSS) into the container without distorting too much..

<style type="text/css">
.wp-image-1646 {
/* this part changes, depending on the image real width and height, and source (daaa..) */
width: 1389px;
height: 696px;
background: url("http://icompile.eladkarako.com/_uploads/2014/07/2014-07-27_134528.jpg") no-repeat;

/* this part is constant. */
max-width: 100%;
max-height: 100%;
overflow: hidden;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
</style>

<a href="https://icompile.eladkarako.com/_uploads/2014/07/2014-07-27_134528.jpg">
<div class="wp-image-1646"></div>
</a>




which will be shown like so..












or better, use shorter inline, which will not required <pre> tags

<a href="https://icompile.eladkarako.com/_uploads/2014/07/2014-08-03_024912.png" style="min-height:707px; width:100%; height:100%; background:url(http://icompile.eladkarako.com/_uploads/2014/07/2014-08-03_024912.png) no-repeat; overflow: hidden; -webkit-background-size: contain; -moz-background-size: contain; background-size: contain; display:block;" /></a>



to make it look like so