php - 像 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 将 background-size 更改为 cover，然后将 background-position 更改为 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;
}​

这是一个 jsfiddle 展示它的实际效果:

http://jsfiddle.net/Jhu2Y/