Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2017
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to resize image2 height to actural height of responsive image1? Possible?

    Hi!

    I don't know about CSS or JS lot, so I post code when it will be req'd.

    What I want to do:
    Resize height of image2 in correct aspect ratio to image1 actual height which is responsive to make responsive also image2.

    image1: 1024W 100H
    image2: 768W 100H

    Anything like:

    <img class="fade" src="item1.png" alt="Retrocomputing" style="max-width:100%; height:auto;"/>
    <img class="fade" src="item2.png" alt="Computing" style="width:auto; height:item1.actual_height;"/>

    Please forgive me syntax - I need to have written it as understandable as possible.
    I need nothing more than I asked.

    Thank you for help, reply or comments.
    Miro

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,170
    Thanks
    38
    Thanked 1,090 Times in 1,086 Posts
    If this is happening because of window view size, than this is not the way to go. What you want is responsive programming; in particular CSS-Grid or use percents for dimensions.

    Or maybe you have a handle on the first image and want the second to follow.

    Please tell us why you want this.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    New to the CF scene
    Join Date
    Aug 2019
    Location
    USA
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Click the picture for resizing the image, Enter the percentages of the current height and width, Clear the Lock aspect ratio check box

  4. #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    353
    Thanks
    3
    Thanked 39 Times in 39 Posts
    Yes, that can be done, but you need Javascript for it. Let me know if you want that, then I'll post the code.
    Glad to be of service, but please do reply to my answer if applicable.

  5. #5
    New Coder
    Join Date
    Apr 2017
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm very sorry for so late reply.
    What I want to do:
    While resizing window I want to resize adjust size of image1 automatically - so it needs to be responsive. If image1 will be resized, then change size of image2, so it makes it responsive too, but in order to image1.

    If is JS req'd I use it.

    Thank you.
    Miro

  6. #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    353
    Thanks
    3
    Thanked 39 Times in 39 Posts
    I don't have time right now to test it, but this code should work:

    PHP Code:
    <!DOCTYPE html>
    <
    html>
    <
    head>
        <
    meta charset="utf-8">
        <
    meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">
        <
    title>Demo</title>
        <
    style>
            
    #img_I {
                
    max-width100%; /* CSS overrules HTML attributes */
                
    heightauto;
            }
        </
    style>
    </
    head>
    <
    body>
        <
    img src="image-1.png" id="img_I" width="1024" heigth="100">
        <
    img src="image-2.png" id="img_II" width="768" heigth="100">
    </
    body>
        <
    script>
            var 
    body document.querySelector('body');
            var 
    img_I document.querySelector('#img_I');
            var 
    img_II document.querySelector('#img_II');
            function 
    matchImgHeight() {
                
    img_II.style.height img_I.style.height// Javascript-declared CSS overrules as well 
                
    img_II.style.width "auto";
            }
            
    body.onload matchImgHeight();
            
    body.onresize matchImgHeight();
        
    </script>
    </html> 
    Glad to be of service, but please do reply to my answer if applicable.

  7. #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,563
    Thanks
    3
    Thanked 638 Times in 624 Posts
    Ho there MIRKOSOFT,


    here is a simple CSS solution...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    body {
        background-color: #f9f9f9;
        font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
     }
    
    #container img {
        display: block;
        width: 100%;
        max-width: 62.5em;
        height: auto;
        margin: 0.75em auto;
        border: 1px solid #000;
        border-radius: 0.5em;
        box-shadow: 0.5em 0.5em 0.5em rgba( 0, 0, 0, 0.3 );
     }
    #container img:last-of-type {
        width: 75%;
        max-width: 46.875em;
     }
    </style>
    
    </head>
    <body> 
    
     <div id="container">
      <img src="https://via.placeholder.com/1024x100/" width="1024" height="100" alt="Retrocomputing">
      <img src="https://via.placeholder.com/768x100/" width="768" height="100" alt="Computing">
     </div>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  8. #8
    New Coder
    Join Date
    Apr 2017
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very very much coothead!
    Your CSS works perfectly. The PHP version works not, but now I can see more in syntax.

    Thank you again!
    Miro

  9. #9
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,563
    Thanks
    3
    Thanked 638 Times in 624 Posts

    No problem, you're very welcome.

    coothead
    ~ the original bald headed old fart ~


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •