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

Question

In wordpress, I want to show a height reduced image but keeping width and ratio. The image is 400px large and 300px height. I want it 400px large but only 200px height, and centered.

This solution may help me but is uses div ? Crop and center image without using background-image But I can't add any div around image because wordpress doesnt create any. May be could I create a div using PHP ou JS ?

Here is the html created by Wordpres :

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

and a JSFiddle to try : http://jsfiddle.net/v4w90e29/

If anyone can help me, thanks a lot !!!

Answer 1

Use JQuery document ready function with this code

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

After this your image will be in the div with class wrapper. After that just simple css. For wrapper it will be:

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

Answer 2

You can wrap the image very easily with jQuery.

 $(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); }); }); 

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

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