• Size DIV with nested IMG

    From Andrew Poulos@21:1/5 to All on Wed Feb 3 10:52:26 2021
    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Eli the Bearded@21:1/5 to Andrew Poulos on Wed Feb 3 00:27:03 2021
    In comp.infosystems.www.authoring.stylesheets,
    Andrew Poulos <ap_prog@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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Andrew Poulos on Wed Feb 3 13:02:52 2021
    On 3/02/2021 10:52 am, Andrew Poulos 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.

    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.

    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?B?8J+YiSBHb29kIEd1eSDwn5iJ?@21:1/5 to Andrew Poulos on Wed Feb 3 03:40:00 2021
    This is a multi-part message in MIME format.
    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.

    Stop Biden from censoring the internet
    --

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


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Brawler"
    rel="stylesheet">
    <style>
    @keyframes test {
    0% {
    border-color: darkgreen;
    }

    50% {
    border-color: red;
    }

    70% {
    border-color: yellow;
    }

    100% {
    border-color: grey;
    }

    0% {
    border-color: darkgreen;
    }

    0% {
    border-color: darkgreen;
    }

    0% {
    border-color: darkgreen;
    }
    }

    @keyframes newsgroups {
    0% {
    border-color: red;
    }

    16.66666667% {
    border-color: orange;
    }

    33.33333333% {
    border-color: yellow;
    }

    50% {
    border-color: green;
    }

    66.66666667% {
    border-color: blue;
    }

    83.33333333% {
    border-color: indigo;
    }

    100% {
    border-color: violet;
    }
    }

    body {
    background-color: #d6cdab;
    font-family: 'Brawler', 'Montserrat', 'Roboto', 'Open+Sans', 'sans-serif', 'serif';
    margin: 0;
    padding: 0 0 20px 0;
    }

    div.newsgroups {
    border: solid transparent 10px;
    background-color: #eee;
    animation-name: newsgroups;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    padding: 10px;
    font-size: 18px;
    width: 60%;
    margin: auto;
    box-sizing: border-box;
    }
    ul {
    list-style-type: square;
    }
    img {
    width: 100%;
    display: inline-block;
    }

    </style>
    </head>
    <body text="#008000" bgcolor="#faf0e6">
    <div class="newsgroups">
    <div class="moz-cite-prefix">On 02/02/2021 23:52, Andrew Poulos
    wrote:<br>
    </div>
    <blockquote type="cite"
    cite="mid:JKGdnaysGZgheIT9nZ2dnUU7-cnNnZ2d@westnet.com.au"><br>
    <br>
    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. <br>
    <br>
    <br>
    </blockquote>
    <p>A simple css like so will do the job:</p>
    <pre><code>
    img {
    width: 100%;
    display: inline-block;
    }
    </code>
    </pre>
    <p>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. </p>
    </div>
    <div class="moz-signature">-- <br>
    <div style="background-color: blue; color: yellow; font-weight:
    bolder; display: grid; align-items: center; justify-items:
    center; min-height: 80px; font-size: 1.2em; border-radius: 50px;
    ">
    <p>With over 1.2 billion devices now running Windows 10,
    customer satisfaction is higher than any previous version of
    windows.</p>
    </div>
    </div>
    </body>
    </html>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)