Fit image into specifically sized box without losing aspect ratio?

Question

How can I take an image that has been entered into Wordpress and fit it into a specific sized div without losing it's aspect ratio?

The div is 104px x 104px but the user could literally enter an image into Wordpress at any size.

I'm using the following to insert the image from Wordpress into the page:

<img border="0" src="<?php the_sub_field('logo'); ?>" alt="<?php the_sub_field('text'); ?>" />

I haven't set a width or height.

You might want to take a look at this [answer](http://stackoverflow.com/a/11763434/710827). Key being `background-position: 50% 50%;` — Nick Fury, Mar 08 '13 at 14:06
Do you want the 104px div completely filled even if the image they upload isn't a square? Or do you just want to find the max of the height or width then reduce the higher of the two to 104? — Pitchinnate, Mar 08 '13 at 14:07

score 2 · Answer 1 · answered Mar 08 '13 at 14:12

This has nothing to do with WordPress, PHP, or any other server side program, or programming language.

<img style="max-width: 100%;" border="0" src="<?php the_sub_field('logo'); ?>" alt="<?php the_sub_field('text'); ?>" />

As long as you set max-width and no other widths or heights the image will be no larger than the containing element and won't lose aspect ratio.

score 1 · Answer 2 · answered Jun 08 '13 at 14:44

set only one parameter i.e. height or width. You will never loose the aspect ratio of that image. You can set the width of the container and make image width to 100% or you can directly add width to your image, but don't set both parameters to get the correct aspect ratio.

score 0 · Answer 3 · answered Mar 08 '13 at 14:39

0

Use http://phpthumb.sourceforge.net/

here you have a lot of demons how to use it

http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php

answered Mar 08 '13 at 14:39

Robert

19,800
5
55
85

score -2 · Answer 4 · answered Mar 08 '13 at 14:09

Set the images CSS max-width and max-height values to the width and height values of the surrounding div.

<div style="width: 104px; height: 104px;">
    <img style="max-width: 104px; max-height: 104px;" src="myimage.jpg">
</div>

I'm not familiar with Wordpress, but wherever you can change these CSS values, do it and it will fit the div.

Fit image into specifically sized box without losing aspect ratio?

4 Answers4