make image as big as possible

[Helmut Richter]

I want to place an <img> into a <div>-box with a certain width and want it
as big as possible so that it fits into the box. The obvious syntax
<img src="..." width="100%"> works fine with Firefox but the syntax is not
correct: width can only specified as number of pixels. But I do not know
the width of the box in pixels – it depends on the size of the viewport
and on the font size chosen by the user.

Is there a way to get this effect without a syntax problem?

The thing that worked (with wrong syntax) was:


<div style="max-width:48em; border:red solid 1px"> <!-- same width as text -->
<div style="float:right; width:60%; border:green solid 1px"><img
src="641003%20GZB-051g%20GZB.tif.jpg" width="100%"/></div> <!-- box for img -->
</div>

Probably there are other solutions that are easier but I do not see them.

I need it for getting at least bit responsiveness to varying screen sizes.
A work-around would be with "srcset" and "sizes" attributes but this is
far more complicated.

--
Helmut Richter

[John-Paul Stewart]

On 2022-05-28 15:24, Helmut Richter wrote:
> I want to place an <img> into a <div>-box with a certain width and want it
> as big as possible so that it fits into the box. The obvious syntax
> <img src="..." width="100%"> works fine with Firefox but the syntax is not
> correct: width can only specified as number of pixels.

Use CSS, where 100% is syntactically valid for width:

<img src="..." style="width: 100%;">

[Helmut Richter]

Yes indeed, sometimes I do not see the forest for the trees.

Thank you. You may have saved me hours of trials with increasing
complexity.

--
Helmut Richter