I have this HTML

<div id="con">
<div id="tp">Text</div>

<div id="parts">
<img src="01.jpg">
</div>

<div id="bm">More text</div>
</div>

and this CSS

#con {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 20px 1fr 20px;
} #tp {
grid-column: 1;
grid-row: 1;
} #parts {
border: 1px solid #004853;
grid-column: 1;
grid-row: 2;
justify-self: center;
align-self: center;
min-width: 0;
min-height: 0;
} img {
display: block;
} #bm {
grid-column: 1;
grid-row: 3;
}

What I need is for the image to maintain its aspect ratio at all times
and also to size responsively (currently if I have a very large image
then scroll bars appear). That is, when the image's intrinsic size is
larger than the containing grid item the image shrinks to fit.

The image is an arbitrary image that a user selects.

I tried a number of approaches but none of them work.

Andrew Poulos

In Message <f7ednbh2R45k2bX8nZ2dnUU7-KnNnZ2d@westnet.com.au>
On Fri, 27 Aug 2021 11:50:47 +1000
Andrew Poulos <ap_prog@hotmail.com> wrote:

> I have this HTML

> <div id="con">
> <div id="tp">Text</div>

> <div id="parts">
> <img src="01.jpg">
> </div>

> <div id="bm">More text</div>
> </div>

> and this CSS

> #con {
> position: absolute;
> left: 0;
> top: 0;
> right: 0;
> bottom: 0;
> display: grid;
> grid-template-columns: 1fr;
> grid-template-rows: 20px 1fr 20px;
> }
> #tp {
> grid-column: 1;
> grid-row: 1;
> }
> #parts {
> border: 1px solid #004853;
> grid-column: 1;
> grid-row: 2;
> justify-self: center;
> align-self: center;
> min-width: 0;
> min-height: 0;
> }
> img {
> display: block;
> }

img {
display: block;
width:auto;
height:auto;
max-height:calc(100vh - 40px);
max-width: calc(100vw - 2px);
}

> #bm {
> grid-column: 1;
> grid-row: 3;
> }

> What I need is for the image to maintain its aspect ratio at all
> times and also to size responsively (currently if I have a very large
> image then scroll bars appear). That is, when the image's intrinsic
> size is larger than the containing grid item the image shrinks to fit.

> The image is an arbitrary image that a user selects.

> I tried a number of approaches but none of them work.

--
Jš•’š•žš•–š•¤ š•‚š•šš•£š•œ

On 29/08/2021 8:59 pm, Jš•’š•žš•–š•¤ š•‚š•šš•£š•œ wrote:
> In Message <f7ednbh2R45k2bX8nZ2dnUU7-KnNnZ2d@westnet.com.au>
> On Fri, 27 Aug 2021 11:50:47 +1000
> Andrew Poulos <ap_prog@hotmail.com> wrote:
>
>> I have this HTML
>
>> <div id="con">
>> <div id="tp">Text</div>
>
>> <div id="parts">
>> <img src="01.jpg">
>> </div>
>
>> <div id="bm">More text</div>
>> </div>
>
>> and this CSS
>
>> #con {
>> position: absolute;
>> left: 0;
>> top: 0;
>> right: 0;
>> bottom: 0;
>> display: grid;
>> grid-template-columns: 1fr;
>> grid-template-rows: 20px 1fr 20px;
>> }
>> #tp {
>> grid-column: 1;
>> grid-row: 1;
>> }
>> #parts {
>> border: 1px solid #004853;
>> grid-column: 1;
>> grid-row: 2;
>> justify-self: center;
>> align-self: center;
>> min-width: 0;
>> min-height: 0;
>> }
>> img {
>> display: block;
>> }
>
> img {
> display: block;
> width:auto;
> height:auto;
> max-height:calc(100vh - 40px);
> max-width: calc(100vw - 2px);
> }
>

That did it! Thanks.

I gave up and was trying to get it to work using flex now I can go back
to the original approach.

Andrew Poulos