html - 如何在不更改 html 和比率的情况下裁剪图像高度(并将其居中)？

Question

在 wordpress 中，我想显示高度缩小的图像，但保持宽度和比例。 图片大 400 像素，高 300 像素。我想要它大 400 像素但高度只有 200 像素，并且居中。

此解决方案可能对我有帮助，但使用的是 div 吗？ Crop and center image without using background-image 但我不能在图像周围添加任何 div，因为 wordpress 不会创建任何图像。我可以使用 PHP 或 JS 创建一个 div 吗？

这是 Wordpres 创建的 html:

<p>
    <a href="http://finance.blog.lemonde.fr/files/2012/09/IMG-20120909-00051.jpg">
        <img width="400" height="300" src="http://finance.blog.lemonde.fr/files/2012/09/IMG-20120909-00051.jpg">
    </a>
</p>

和一个 JSFiddle 来尝试: http://jsfiddle.net/v4w90e29/

如果有人能帮助我，非常感谢!!!

Answer 1

在这段代码中使用 JQuery 文档就绪函数

var divs = jQuery("img");
for(var i = 0; i < divs.length; i+=3) {
divs.slice(i, i+3).wrapAll("<div class='wrapper'></div>");
}

在此之后，您的图像将位于带有类包装器的 div 中。之后只是简单的CSS。 对于包装器，它将是:

.wrapper {height:400px; width:200px; overflow:hidden;}