Question

WordPress uses a function to center completely the image on a thumbnail when you are editing a post so it look like this when i´m editing the post:

i´m trying to show the image that way on a wordpress page but I don´t know how to create a function like the one that uses wordpress to do that:

$s_x = floor( ($orig_w - $crop_w) / 2 );
$s_y = floor( ($orig_h - $crop_h) / 2 );

So this is how it looks in my page:

it just shows from the top, so it cuts the image, no center or resize

this is my markup:

            echo '<div class="aimagediv" >'; //        
            echo '<img src="'.$s['project_image'].'" alt="" width="270" />';
            echo '</div>';

i´m limiting the width just to show something, i know it´s wrong to do it that way, that´s why i´m looking for a function to rezise and center the image over the div.

Can someone help me with this one?

Answer 1

I think you’re better to put this image as a background image of the div and then using css to change background-size to cover and then background-position to center…

HTML

echo '<div class="image" style="background-image:url(\''.$s['project_image'].'\');">';

echo '</div>';
?>​

CSS

.image{
width: 270px;
height: 270px;
background-size:cover;
background-position: center;
}​

Here’s a jsfiddle showing it in action:

http://jsfiddle.net/Jhu2Y/