Size DIV with nested IMG

[Andrew Poulos]

With some HTML that looks like this

<div class="container">
<img src="000802_c893_0040_csls.jpg" alt="sample">
<div>More content positioned absolute within the parent DIV</div>
</div>

I need a way to size the DIV.container based on the size of the IMG -
the IMG is meant to set the size. The IMG's sizing is supposed to be
based on a percentage size with reference to the viewport. Also the
width and/or the height of the IMG may be auto.

So as the browser window size changes the size of DIV.container changes
but doesn't change the aspect ratio of the IMG it contains.

I tried using some code to first import the image and determine its size
(and then set the size of the DIV with it) but I can't get it to resize
responsively.

Andrew Poulos

[Eli the Bearded]

In comp.infosystems.www.authoring.stylesheets,

Andrew Poulos <ap_...@hotmail.com> wrote:
> With some HTML that looks like this
>
> <div class="container">
> <img src="000802_c893_0040_csls.jpg" alt="sample">
> <div>More content positioned absolute within the parent DIV</div>
> </div>
>
> I need a way to size the DIV.container based on the size of the IMG -
> the IMG is meant to set the size. The IMG's sizing is supposed to be
> based on a percentage size with reference to the viewport. Also the
> width and/or the height of the IMG may be auto.

Pretty sure I solved this in the past with a rule like:

.container > img { width: 90vw; height: auto; }

for 90% viewport width.

Elijah
------
also had some margin and padding rules on .container

[Andrew Poulos]

What would be ideal is to be able to do this

.container {
...
width: 50%;
height: 50%;
aspect-ratio: maintain; /* prop value doesn't exist */
?

Andrew Poulos

[😉 Good Guy 😉]

On 02/02/2021 23:52, Andrew Poulos wrote:

I need a way to size the DIV.container based on the size of the IMG - the IMG is meant to set the size. The IMG's sizing is supposed to be based on a percentage size with reference to the viewport. Also the width and/or the height of the IMG may be auto.

A simple css like so will do the job:

        img {
            width: 100%;
            display: inline-block;
        }
        
    

As far as size is concerned, just use one size. For example if width is larger than height then use width: 100%; If height is larger than width, use height: 100%; DON'T USE BOTH UNLESS YOU WANT TO MESS UP THE ASPECT RATIO.

--

With over 1.2 billion devices now running Windows 10, customer satisfaction is higher than any previous version of windows.

[😉 Good Guy 😉]

On 02/02/2021 23:52, Andrew Poulos wrote:

I need a way to size the DIV.container based on the size of the IMG - the IMG is meant to set the size. The IMG's sizing is supposed to be based on a percentage size with reference to the viewport. Also the width and/or the height of the IMG may be auto.

A simple css like so will do the job:

        img {
            width: 100%;
            display: inline-block;
        }
        
    

As far as size is concerned, just use one size. For example if width is larger than height then use width: 100%; If height is larger than width, use height: 100%; DON'T USE BOTH UNLESS YOU WANT TO MESS UP THE ASPECT RATIO.