Auto size images using Percent

[radhavallabh]

Hi all;
Previously in old oscommerce we were able to auto size images in browser using percentage;
But when I try add a percent value to the width in phoenix it comes up as a blank against the width parameter.
Is there something I need to define somewhere else too for it to work?

For Example :
$cm_i_slider_output .= new Image('images/' . $a['a_image'],[],htmlspecialchars(STORE_NAME), '100%', '100%');
This does not output the width and height as percentage.

Help shall be deeply appreciated;
Thank you in advance ;
Very Warm Regds./
radhavallabh

[14Steve14]

@radhavallabh What versions are you comparing. What ids your old version and what is your new version. Difficult for people to help without the basic information.

[radhavallabh]

@radhavallabh What versions are you comparing. What ids your old version and what is your new version. Difficult for people to help without the basic information.

Hi;
Sorry for any confusion;
In comparison of oscommerce Frozen and Phoenix 1.0.8.21.
In oscommerce it was easy to define the width and height of the image in % format; But in phoenix the % seems to vanish from the width and height, it is regarded as pixels once i upload the code.

Thank you in advance;
Very Warm Regds./
radhavallabh

[beerbee]

Hi,
what happens if you try it with using parameters?

Code: Select all

new Image('images/' . $a['a_image'],['alt' => htmlspecialchars(STORE_NAME), 'width' => '100%', 'height' => '100%']);

Kind regards
Christoph

[burt]

There is no reason to set something 100%.
It is that by default, which is how "responsive" works...

Explain more clearly what you are trying to achieve ?

[radhavallabh]

Hi,
what happens if you try it with using parameters?

Code: Select all

new Image('images/' . $a['a_image'],['alt' => htmlspecialchars(STORE_NAME), 'width' => '100%', 'height' => '100%']);

Kind regards
Christoph

Hi;
Extremely sorry for delayed reply,
It changes to 100 value (i.e. 100px) instead of the percentage as per checking in the browser console;
Regds./
radhavallabh

[radhavallabh]

There is no reason to set something 100%.
It is that by default, which is how "responsive" works...

Explain more clearly what you are trying to achieve ?

Hi;
Extremely sorry for delayed response;
Actually I do not want to set it at 100% only;
Need to set a image at 50% of a div width, which would hence take responsive sizing as per the div depending on its size in the viewport it is viewed in.
So I wanted to use percentage at some places.
Thank you for your help in advance;
Very Warm Regds./
radhavallabh

[14Steve14]

Need to set a image at 50% of a div width, which would hence take responsive sizing as per the div depending on its size in the viewport it is viewed in.

radhavallabh

I dont know much about bootstrap and coding but wouldn't the size of the div be changed rather than the image as the image would change depending on the size of the div it is in. I thought that is what responsiveness was all about. Again, it depends on what you are trying to do.

All detailed here https://getbootstrap.com/docs/5.3/layout/grid/ plus so much more

[radhavallabh]

Need to set a image at 50% of a div width, which would hence take responsive sizing as per the div depending on its size in the viewport it is viewed in.

radhavallabh

I dont know much about bootstrap and coding but wouldn't the size of the div be changed rather than the image as the image would change depending on the size of the div it is in. I thought that is what responsiveness was all about. Again, it depends on what you are trying to do.

All detailed here https://getbootstrap.com/docs/5.3/layout/grid/ plus so much more

Hi;
I alreqady know that image becomes responsive to div, but it still shows the original pixel width, height size of it in browser console.
I want that the size of image appears in browser console in pixels-- as per the percentage of the image defined in php.

Regds./
radhavallabh

[burt]

Steve is correct. The sizing would usually be done on the div (note this is NOT useable code);

Code: Select all

<div 100%>
  <div 50%>
    <img>
  </div>
</div>

Now your image is in the 50% div that is half of the larger div.

Alternatively you can use width utility;

https://getbootstrap.com/docs/4.6/utili ... the-parent