I tried a number of approaches but none of them work.
img {
width: 100%;
}
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.
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);
}
Sysop: | Keyop |
---|---|
Location: | Huddersfield, West Yorkshire, UK |
Users: | 285 |
Nodes: | 16 (2 / 14) |
Uptime: | 72:01:14 |
Calls: | 6,489 |
Calls today: | 2 |
Files: | 12,096 |
Messages: | 5,275,729 |