Center image over a div like wordpress thumbnail

1 Views

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:

enter image description here

Read More

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:

enter image description here

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?

Post Views: 1

Related posts

Leave a Reply

3 comments

  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/

  2. will this div have any other content besides the image? you could use CSS to define a height/width for the div and set the image as a background image with a background size of cover… like this:

    ** EDIT — Adding PHP tags before and after since the OP was using echo **

    <?php
    // do all the php code here that you want before the image div
?>

<style type="text/css">
div.aimagediv {
    height:270px;
    width:270px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}
div.aimagediv:hover {
    cursor:pointer;
}
</style>

<div class="aimagediv" style="background-image:url('<?=$s['project_image']?>');"></div>

<?php
    // do the rest of your php stuff here
?>

    Then if you want to make the div clickable you could use an onclick like this: (replace the div line above with this one)

    <div class="aimagediv" style="background-image:url('<?=$s['project_image']?>');" onclick="window.location='page_id=42&slide=<?=$i?>';"></div>

  3. It’s container probably has a limited height. So When you set the only witdh, it will stretch the image to fit that width, maintaining the aspect ratio.
    If you set only the height, it’s the other way around.
    If you set both width and height it will stretch the image to fit those bounds (and thus maybe screw up the aspect ratio.
    So in your case, set the height, or set both (but make sure you got the ratio right)

    if you want the image to center relative to it’s container, use CSS to set the left and right margin to auto