thumbnails - img or background?

[Nic727]

Hi,

On my portfolio website I will have a work section where I show my most recent stuffs I made.
The most recent one will be on the left with a width of 50% and the four other will be on the right with a width of 25% each.
All these work will be in square, but I want some advice and solution about how to make perfect square. Which one is the best in the industry?

So my solutions are based on already existing stuffs.

1. https://exposure.co/categories

Look like what I want to make. This website is using <ul> and <li> to make square. From what I saw in the code, a width of 25% and a padding-bottom of 25% too is making a kind of mix between rectangle and square. After that they added a background image to the <li>.

2. I saw website like http://www.winbeta.org/ or http://www.neowin.net/ which are using <img>, but it's always the same aspect ratio. They are using WordPress, so I don't know if it's doing that automatically or they are resizing each images manually for the thumbnails.

So what's the best way to show thumbnails on a page?
Does WordPress automatically resizing the image to fit a certain div? How does it work?

My goal is that later I will convert my new website (currently work in progress) into WordPress.



PS: I will find how to make responsive square by myself to put img inside as background of with img tag.

Edited April 20, 2016 by Nic727

[dsonesuk]

In wordpress everytime you upload a image it will save 3 to 4 different size images ( thumbnail, medium, large etc) to set sizes setup by wordpress setting, and that is that! You have the option to edit those image sizes after that by cropping etc if you wish.

 

It is unable to resize, position, crop image automatically to your liking because it is uncapable of doing that. So YOU have to provide images of correct proportions, and position using css to give you the correct design. It can't identify for instance the left area of a landscape image to fit in a square where you want that area to be fully seen with the rest hidden by boundaries of square, it just can't do that! You must provide correct proportional image or use css to achieve this.