CODEWITHSUNDEEP
phphtmlimagewordpress
Rob
Rob

Reputation: 6380

Fit image into specifically sized box without losing aspect ratio?

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.

Upvotes: 2

Views: 3190

Answers (4)

Siddharth Jain
Siddharth Jain

Reputation: 68

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.

Upvotes: 1

Robert
Robert

Reputation: 20286

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

Upvotes: 0

iambriansreed
iambriansreed

Reputation: 22241

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.

Upvotes: 2

Butt4cak3
Butt4cak3

Reputation: 2429

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.

Upvotes: -2

Related Questions