1

当您编辑帖子时，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 上。

有人可以帮我解决这个问题吗？

4

3 回答 3

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/

于 2012-10-24T14:28:15.070 回答
1

这个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>
于 2012-10-24T14:31:10.890 回答
0

它的容器可能高度有限。因此，当您设置唯一的宽度时，它将拉伸图像以适应该宽度，并保持纵横比。如果只设置高度，则相反。如果同时设置宽度和高度，它将拉伸图像以适应这些边界（因此可能会搞砸纵横比。因此，在您的情况下，设置高度，或同时设置两者（但确保比例正确）

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

于 2012-10-24T14:26:28.150 回答