Height Proportional to Width, responsive

Question

Height Proportional to Width, responsive

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

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

link

    .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

asked by anonymous 25.04.2018 / 19:37

2 answers

1

Ideally, you have a% of% plus max-height , since you want the height to have height at most. I would stay:

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 to use jQuery to keep the% s proportional to 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><divclass="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>

25.04.2018 / 20:01

Calculate total of each row in the table Command that Verify that a software is installed on Ubuntu

score 1 · Accepted Answer

EDIT

To do this you can use the technique of padding-top Here you can read more about

This is not very recommended, but how do you keep maintaining this aspect ratio example can solve.

As you said, that if the height is 50% of the width and its width is 46%, just put a padding-top:23% that you will have what you need. However you need to align the contents inside the box again. And for this you need to use float , cleafix and transform , and make @media to be well responsive.

OBS: I did not move in the html, only in 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 have not put too many details or conditions, the most basic thing to do is to take the fixed value of the height of this class and put it with auto .my-prop-grid { height: auto;}

See how it looks in the example. Now with no fixed height the size will adjust according to the content that is 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: link