在像wordpress缩略图的div上的中心图像

Question

Wordpress使用一个功能在编辑帖子时将图像完全居中在缩略图上，所以当我编辑帖子时它看起来像这样：

我试图在wordpress页面上显示图像，但我不知道如何创建一个像使用wordpress这样的功能：

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

所以这就是它在我的页面中的样子：

它只是从顶部显示，因此它会切割图像，没有中心或调整大小

这是我的标记：

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

我限制宽度只是为了显示某些东西，我知道这样做是错误的，这就是为什么我正在寻找一个功能来重新定位并将图像居中于div。

有人可以帮我这个吗？

Answer 1

我认为你最好将此图像作为div的背景图像，然后使用css将背景大小更改为覆盖，然后将背景位置更改为居中......

<强> 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;
}​

这是一个jsfiddle显示它的实际效果：

http://jsfiddle.net/Jhu2Y/

Answer 2

除了图像之外，这个div还有其他任何内容吗？您可以使用CSS来定义div的高度/宽度，并将图像设置为背景大小为封面的背景图像......如下所示：

**编辑 - 自OP使用echo **之前和之后添加PHP标签

<?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
?>

然后，如果你想使div可点击，你可以使用这样的onclick :(用上面的替换上面的div行）

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

Answer 3

它的容器可能有一个有限的高度。因此，当您设置唯一的witdh时，它将拉伸图像以适应该宽度，从而保持纵横比。 如果你只设置高度，那就是另一种方式。 如果同时设置宽度和高度，它将拉伸图像以适合这些边界（因此可能会增加纵横比。 所以在你的情况下，设置高度，或设置两者（但要确保你的比率正确）

如果您希望图像相对于其容器居中，请使用CSS将左右边距设置为自动