info
Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Responsive Image in Grid Item
5 views
Skip to first unread message
Andrew Poulos
Aug 26, 2021, 9:50:55 PM8/26/21
to
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
<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
😉 Good Guy 😉
Aug 27, 2021, 2:02:49 PM8/27/21
to
On 27/08/2021 02:50, Andrew Poulos
wrote:
I tried a number of approaches but none of them work.
Such as what?
Have you tried to insert an extra style like:
img {
width: 100%;
}
Where is your live test page for people to see it.
-- Windows-10: <news://freenews.netfront.net/alt.comp.os.windows-10> Windows-8: <news://freenews.netfront.net/alt.comp.os.windows-8> Windows-7: <news://freenews.netfront.net/alt.windows7.general> Windows XP: <news://freenews.netfront.net/microsoft.public.windowsxp.general> Windows-XP: <news://freenews.netfront.net/microsoft.public.windowsxp.general> Firefox: <news://freenews.netfront.net/alt.comp.software.firefox> Thunderbird: <news://freenews.netfront.net/alt.comp.software.thunderbird> Google Groups: <https://groups.google.com/g/microsoft.public.windowsxp.general>
J𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜
Aug 29, 2021, 6:59:22 AM8/29/21
to
In Message <f7ednbh2R45k2bX8...@westnet.com.au>
img {
display: block;
width:auto;
height:auto;
max-height:calc(100vh - 40px);
max-width: calc(100vw - 2px);
J𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜
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.
--
> #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𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜
Andrew Poulos
Aug 29, 2021, 8:16:23 PM8/29/21
to
I gave up and was trying to get it to work using flex now I can go back
to the original approach.
Andrew Poulos
0 new messages