Reputation: 9

In responsive design, how to make a photo height equal to the height of text without setting column height in advance?

I am making a simple webpage, where I have 2 columns side by side, the left one with content and the right one with a photo. The page is responsive, and for this reason I didn't set fixed heights for the columns.

Since the photo is quite tall, I would like to adjust its height (and width - keeping its proportions) according to the text column height, which is changeable according to the size of the viewport.

I looked around and didn't see a way of doing it, I didn't find a way of somehow repeatedly measuring the height of the left column and apply it to the right one.

I wrote and copy-pasted the code below, just normal responsive to create couple of columns I just don't know how to solve this problem, without using pre-fixed column heights, and even then, with a change of viewport, it wouldn't be of help.

/* see the code below, thanks *>
  <style>
    * {
        box-sizing: border-box;
    }

    /* clearfix hack, cleaning after floats*/
    .row::after {
            content:"";
            clear: both;
            display: table;
    }

        /* for arranging columns for different screen size */
        [class*="col-"] {
            float: left;
            padding: 10px;
        }


        /*--fontfamily*/
        html * {
            font-family:"EBGaramond", garamond, Georgia, serif;
            font-weight: 70;
        }

        body {
            max-width: 968px;
            margin:0 auto;
        }

        img {
            height: 1em;
        }


        /*make the division for content and photo*/
        .main {
            padding-left: 10px;
            padding-right: 20px;
            padding-top: 10px;
            text-align: left;
            float: left; 
                         
        }

        .photo1 {
            background-color: white;
            padding: 10px;
            float: right;      
        }
        
        /*background color cerca a mi*/
        .colorcerca {
            background-color: #cb8262ff;
        }
        
        /*background color footer*/
        .colorfooter {
            background-color: #1c2e3cff;
        }

        [class*="col-"] {
           width: 100%;
        }

        /*responsive display */

        @media only screen and (max-width: 600px) {
            div.widepage {
                font-size: 110%;
            }
            /* for 1st section smaller header for mobile device */
            div.subheader {
                font-size: 80%;
            }
            /* font size for content mobile */
            div.textsize {
                font-size: 100%;
            }
        }

        @media only screen and (min-width: 601px) {
            /*for all other than mobile phone)*/
            .col-1 {width: 8.33%;}
            .col-2 {width: 16.66%;}
            .col-3 {width: 25%;}
            .col-4 {width: 33.33%;}
            .col-5 {width: 41.66%;}
            .col-6 {width: 50%;}
            .col-7 {width: 58.33%;}
            .col-8 {width: 66.66%;}
            .col-9 {width: 75%;}
            .col-10 {width: 83.33%;}
            .col-11 {width: 91.66%;}
            .col-12 {width: 100%;} 

            div.widepage {
                font-size: 130%
            }
            /* for 1st section smaller header for big device*/
            div.subheader {
                font-size: 100%;
            }
            /* font size for content widepage */
            div.textsize {
                font-size:100%;
            }
        }    

       
    </style>


<body>
.
.
.
     <div class="row">
        <div class="main textsize col-9">
            blah blah blah                           
        </div>

        <div class="photo1 col-3">
            <img src="mm.jpg" alt="mm" style="max-width:100%; height: auto;">
         </div>
      </div>`
 /*end of code */

Does anyone have any idea?

Thanks!

Upvotes: 0

In responsive design, how to make a photo height equal to the height of text without setting column height in advance?

Answers (0)

Related Questions