Question

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

这个解决方案可以帮助我，但是使用div？ Crop and center image without using background-image 但是我不能在图像上添加任何div，因为wordpress不会创建任何div。也许我可以使用PHP ou 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;}

Answer 2

您可以使用jQuery轻松包装图像。

＆＃13;

$(document).ready(function() {
  // let's only include the images in paragraphs as the site most likely has other img elements somewhere.
  var paragraphImages = $("p img");

  paragraphImages.each(function() {
    $t = $(this); // $(this) -> the current img in the loop.
    $t.wrapAll("<span class='wrapper'></span>");
    
    // margin-top = negative of images height divided by 2.
    $t.css("margin-top", -$t.height()/2);
  });
});

＆＃13;

p a img {
  max-width: 400px;
}
.wrapper {
  height: 200px;
  width: 400px;
  overflow: hidden;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <a href="http://finance.blog.lemonde.fr/files/2012/09/IMG-20120909-00051.jpg">
    <img width="1000" height="750" src="http://finance.blog.lemonde.fr/files/2012/09/IMG-20120909-00051.jpg">
  </a>

</p>
<p>
  <a href="http://finance.blog.lemonde.fr/files/2012/09/IMG-20120909-00051.jpg">
    <img width="1000" height="400" src="http://finance.blog.lemonde.fr/files/2012/09/IMG-20120909-00051.jpg">
  </a>
</p>

＆＃13;

如何在不改变html和比率的情况下裁剪图像高度（并使其居中）？

2 个答案: