0

I’m using a thumbnail size of 100 * 60 in my blog, but sometimes I want to use square images.

Is it possible to use a Wordpress plugin or CSS to make it fits by adding background in the sides to keep the original ratio of the image?

Example:

  1. Original image size : 120 x 120
  2. Add extra white/transparent background to make it at the thumbnail ratio : 200x120 so 40 pixels on the right and the left on the original image so it’s centred
  3. Reduce the image size from 200*120 to 100*60.
0

CSS Reference: background-size can stretch a background image proportionally using cover or contain. Check out this Demo.

HTML

<div class="square"></div>  
<div class="rec"></div>  

CSS

.rec, .square {
  border: solid red 1px;
  background-color:black;
  background: url("https://placeholdit.imgix.net/~text?txtsize=23&txt=120×120&w=120&h=120");
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center; 
}
.rec {
  width:100px;
  height:60px;
}
.square {
  width:100px;
  height:100px;
}

The remaining space with contain will be transparent so just put it in a container with a background color set.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.