Centering and cropping an image?

Asked May 27 '14 at 12:08

Active May 27 '14 at 12:08

Viewed 83 times

My page has a series of squares, inside the squares I want images.

The images are brought in dynamically from a database and are of all different widths and heights.

I want the images to fill the squares, whats the best approach to this?

I considered background cover but then I would have to set the image as inline css - or is there another way to do this? Also is inline css frowned upon?

Is there a way to do it with img tags? I wish to have the centre of the ing displayed, with the rest of it cropped off.

asked May 27 '14 at 12:08

panthro

22,779
66
183
324

If you're not displaying the full image it might be worth considering cropping them before displaying them, it would be less bandwidth for everyone, especially if you're displaying the images multiple times. – scragar May 27 '14 at 12:10
`` should do what you want. – display-name-is-missing May 27 '14 at 12:11
@ Daniel Lisik does not work I'm afraid – panthro May 27 '14 at 12:14
@scragar bandwidth not an issue, thanks – panthro May 27 '14 at 12:14
@panthro why doesn't it work? It covers the whole element and centers it. – display-name-is-missing May 27 '14 at 12:15
It doesn't work because the img element doesn't have a background-image set. I think you could write inline background images or use a little bit of js to pick an image and place it as a background – Jonas Grumann May 27 '14 at 12:16
Thanks @Jonas Grumann is this my best bet, inline css with background ing set? – panthro May 27 '14 at 12:17
I'm afraid so, if you want to do it on the front end. The best solution overall would be to do the cropping on the server – Jonas Grumann May 27 '14 at 12:18

Centering and cropping an image?

0 Answers0