Height Proportional to Width, responsive

Asked

Viewed 894 times

1

Below we have a grid layout, fluid, no images. What I would like now is for height to be proportionally responsive to width.

https://codepen.io/johnquimera/pen/aGZaVY

    .my-prop-grid {
        width: 46%;
        display: inline-block;
        vertical-align: top;
        position: relative;
      
        height: 336px;
    }

    .my-prop-grid .my-grid-main {
        height: 100%;
        width: 100%;
        display: table;
        text-align: center;
    }

    .my-prop-grid .my-grid-wrap {
        display: table-cell;
        vertical-align: middle;
        background: #fff;
        color: #666666;
        border: 1px solid #F0F0F0;
    }

    .my-prop-grid .my-grid-inner {
        margin: auto;
        padding: 30px 0;
        width: 90%;
    }
    .container {
        max-width: 1170px;
        margin: 0px auto;
    }
<div class="container">

    <div class="my-prop-grid">
        <div class="my-grid-main">
            <div class="my-grid-wrap">
                <div class="my-grid-inner">
                    <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo.</a></h3>
                    <p>Mauris in metus vitae libero laoreet malesuada vel a turpis. </p>
                </div>
            </div>
        </div>
    </div>

    <div class="my-prop-grid">
        <div class="my-grid-main">
            <div class="my-grid-wrap">
                <div class="my-grid-inner">
                    <h3><a href="#">Praesent eu ex ligula. Aenean hendrerit pretium odio, nec pretium nisl ornare vitae.</a></h3>
                    <p>Vestibulum vel velit non tortor tristique fermentum ac et turpis. </p>
                </div>
            </div>
        </div>
    </div>

</div>

css

2 answers

1


EDIT

To do this you can use the technique of padding-top Here you can read more about it It’s not very recommended, but as you should keep this Aspect ratio this example can solve.

As you said that the height is 50% of the width and its width is 46%, just put a padding-top:23% that you will get what you need. However you need to re-align the content within the box. And for that you need to use float, cleafix and transform, and make a @media to be very responsive.

OBS: I didn’t touch the html, only the CSS, I left the comments in the code

See the result in the example below.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.my-prop-grid {
        width: 46%; /* 100% é 46% logo o height tem que ser 23% */
        display: inline-block;
        vertical-align: top;
        position: relative;

    }

    .my-prop-grid .my-grid-main {
        height: 100%;
        width: 100%;
        display: table;
        text-align: center;
    }

    .my-prop-grid .my-grid-wrap {
        display: table-cell;
        vertical-align: middle;
        background: #fff;
        color: #666666;
        border: 1px solid #F0F0F0;
        padding-top: 23%; /* esse padding de 23% vai manter o aspecto de 50% da largura que é 46% */
    }

    .my-prop-grid .my-grid-inner {
        margin: 0 auto;
        padding: 10% 10px 0px;
        box-sizing: border-box;
        width: 100%;
        float: left;
        transform: translateY(-50%);  /* alinha o conteúdo na vertical */
    }
    .my-prop-grid .my-grid-inner::after { /* clearfix do float */
        content:"";
        display: table;
        clear: both;
    }
    .container {
        max-width: 1170px;
        margin: 0px auto;
    }

    /* tratamento responsivos*/
    @media only screen and (max-width: 900px){
        .my-prop-grid .my-grid-inner {
            transform: translateY(-30%);
        }
    }
    @media only screen and (max-width: 700px){
        .my-prop-grid .my-grid-inner {
            transform: translateY(-20%);
        }
    }
    @media only screen and (max-width: 400px){
        .my-prop-grid .my-grid-inner {
            transform: translateY(-12%);
        }
    }
    <div class="container">

        <div class="my-prop-grid">
            <div class="my-grid-main">
                <div class="my-grid-wrap">
                    <div class="my-grid-inner">
                        <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo.</a></h3>
                        <p>Mauris in metus vitae libero laoreet malesuada vel a turpis. </p>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="my-prop-grid">
            <div class="my-grid-main">
                <div class="my-grid-wrap">
                    <div class="my-grid-inner">
                        <h3><a href="#">Praesent eu ex ligula. Aenean hendrerit pretium odio, nec pretium nisl ornare vitae.</a></h3>
                        <p>Vestibulum vel velit non tortor tristique fermentum ac et turpis. </p>
                    </div>
                </div>
            </div>
        </div>
    
    </div>

As you did not put too much detail or conditions the most basic thing to do and take the fixed value of the height of this class and put with auto .my-prop-grid { height: auto;}

See how it looks in the example. Now without fixed height the size will adjust according to the content inside.

    
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.my-prop-grid {
        width: 46%;
        display: inline-block;
        vertical-align: top;
        position: relative;
      
        height: auto;
    }

    .my-prop-grid .my-grid-main {
        height: 100%;
        width: 100%;
        display: table;
        text-align: center;
    }

    .my-prop-grid .my-grid-wrap {
        display: table-cell;
        vertical-align: middle;
        background: #fff;
        color: #666666;
        border: 1px solid #F0F0F0;
    }

    .my-prop-grid .my-grid-inner {
        margin: auto;
        padding: 30px 0;
        width: 90%;
    }
    .container {
        max-width: 1170px;
        margin: 0px auto;
    }
    
    <div class="container">

        <div class="my-prop-grid">
            <div class="my-grid-main">
                <div class="my-grid-wrap">
                    <div class="my-grid-inner">
                        <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo.</a></h3>
                        <p>Mauris in metus vitae libero laoreet malesuada vel a turpis. </p>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="my-prop-grid">
            <div class="my-grid-main">
                <div class="my-grid-wrap">
                    <div class="my-grid-inner">
                        <h3><a href="#">Praesent eu ex ligula. Aenean hendrerit pretium odio, nec pretium nisl ornare vitae.</a></h3>
                        <p>Vestibulum vel velit non tortor tristique fermentum ac et turpis. </p>
                    </div>
                </div>
            </div>
        </div>
    
    </div>

Article about this technique: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

  • on localhost I had already tested this, but wanted at least the initial height to be the width size.

  • @Johnquimera which ratio more precisely you need? You want it to be 1/3 wide? 50% wide? 3/4 wide?

  • may be 50%, I was wondering if this employee with Aspect ratio, but as there is no picture, I can not say.

  • @Johnquimera face looks at the beginning of my answer the Edit that I did, with this technique you can maintain the height width ratio, test there and tell me.

  • very good, I had decided that I would use this with the bootstrap grids, if possible with a ratio of 880x660.

  • could you help me with another question? https://answall.com/q/300239/95735

Show 1 more comment

1

Ideally you seven one max-height besides the height, since you want the height to have 336px at most. Would be:

height: 100%;
max-height: 336px;


.my-prop-grid {
        width: 46%;
        display: inline-block;
        vertical-align: top;
        position: relative;
      
         height: 100%;
        max-height: 336px;
    }

    .my-prop-grid .my-grid-main {
        height: 100%;
        width: 100%;
        display: table;
        text-align: center;
    }

    .my-prop-grid .my-grid-wrap {
        display: table-cell;
        vertical-align: middle;
        background: #fff;
        color: #666666;
        border: 1px solid #F0F0F0;
    }

    .my-prop-grid .my-grid-inner {
        margin: auto;
        padding: 30px 0;
        width: 90%;
    }
    .container {
        max-width: 1170px;
        margin: 0px auto;
    }
<div class="container">

    <div class="my-prop-grid">
        <div class="my-grid-main">
            <div class="my-grid-wrap">
                <div class="my-grid-inner">
                    <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo.</a></h3>
                    <p>Mauris in metus vitae libero laoreet malesuada vel a turpis. </p>
                </div>
            </div>
        </div>
    </div>

    <div class="my-prop-grid">
        <div class="my-grid-main">
            <div class="my-grid-wrap">
                <div class="my-grid-inner">
                    <h3><a href="#">Praesent eu ex ligula. Aenean hendrerit pretium odio, nec pretium nisl ornare vitae.</a></h3>
                    <p>Vestibulum vel velit non tortor tristique fermentum ac et turpis. </p>
                </div>
            </div>
        </div>
    </div>

</div>

Another alternative is using jQuery to maintain the ratio of divs and equal height when they are different:

$(window).on("load resize", function(){

   var gridPr = $(".my-prop-grid");
   var gridWt = gridPr.width();
   var gridHt = gridPr.height();

   var gridMn = $(".my-grid-main");

   // manter a proporção 538x336 = 1,601190476190476
   $(".my-prop-grid")
   .css("height", gridWt/1.601190476190476+"px");

   // loop para manter as divs na mesma altura
   var gridAt = 0;
   gridMn.each(function(){
      if($(this).height() > gridAt) gridAt = $(this).height();
   });

   $(".my-prop-grid")
   .css("height", gridAt+"px");

});
.my-prop-grid {
        width: 46%;
        display: inline-block;
        vertical-align: top;
        position: relative;
      
        /*height: 336px;*/
    }

    .my-prop-grid .my-grid-main {
        height: 100%;
        width: 100%;
        display: table;
        text-align: center;
    }

    .my-prop-grid .my-grid-wrap {
        display: table-cell;
        vertical-align: middle;
        background: #fff;
        color: #666666;
        border: 1px solid #F0F0F0;
    }

    .my-prop-grid .my-grid-inner {
        margin: auto;
        padding: 30px 0;
        width: 90%;
    }
    .container {
        max-width: 1170px;
        margin: 0px auto;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

    <div class="my-prop-grid">
        <div class="my-grid-main">
            <div class="my-grid-wrap">
                <div class="my-grid-inner">
                    <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo.</a></h3>
                    <p>Mauris in metus vitae libero laoreet malesuada vel a turpis. </p>
                </div>
            </div>
        </div>
    </div>

    <div class="my-prop-grid">
        <div class="my-grid-main">
            <div class="my-grid-wrap">
                <div class="my-grid-inner">
                    <h3><a href="#">Praesent eu ex ligula. Aenean hendrerit pretium odio, nec pretium nisl ornare vitae.</a></h3>
                    <p>Vestibulum vel velit non tortor tristique fermentum ac et turpis. </p>
                </div>
            </div>
        </div>
    </div>

</div>

  • interesting, there is something you know? I would like that if possible, the height would not be defined, but it would have the same width size.

  • So in case it would be a square? Only with CSS I don’t think it’s possible because the width and height dimensions of the screen are different.

  • it might be that yes, I think it would look good, whatever you think it looks good, okay.

  • I added in the answer a solution with jQuery.

  • i faltered, from the beginning, this is to be used with bootstrap grids, tested here and it works, wanted to maintain a ratio of 880x660

  • would like to maintain a 880x660 ratio, how to do to calculate it?

  • Vc calculates the proportion by dividing the largest by the smallest: 880/660 = 1.333333333333333

  • Or the smallest by the largest: 660/880 = 0.75... means the smallest is 0.75 of the largest size.

Show 3 more comments

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.