How to crop image height (and center it) without changing html and ratio?

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

score 0 · Answer 1 · answered Feb 27 '15 at 09:46

0

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

answered Feb 27 '15 at 09:46

Andris

3,895
2
24
27

In your case in i+3 write i+1 – Andris Feb 27 '15 at 09:49
thanks a lot ! here is is : http://jsfiddle.net/nonoseki/jxtd7y13/1/ but how can I center it vertically ? Very usefull wrap() !!! – Feb 27 '15 at 11:09

Sevanteri · Answer 2 · 2015-02-27T11:19:51.070

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

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

thanks a lot ! here is is : http://jsfiddle.net/nonoseki/jxtd7y13/1/ but how can I center it vertically ? — , Feb 27 '15 at 11:09

How to crop image height (and center it) without changing html and ratio?

2 Answers2