Resize an element if it moves to a new line

Question

On http://www.rosstheexplorer.com/picture-test/ I have two images side by side. These two images have different height to width ratios. I wanted both images to have the same height, so the images had different widths. I used the bottom hack pad so that the height and width of the images always remain proportional.

For this, I added a CSS file

following:

    .wrapper-133percent-grampians {
    width: 33.9%;
    float: left;}


.wrapper-75percent-grampians {
    width: 60.1%;
    float: left;
}

.wrapper-133percent-grampians .inner {
    position: relative;
    padding-bottom: 133%;
    height: 0;
}

.wrapper-75percent-grampians .inner {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.element-to-stretch-grampians {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML code is as follows

<div class="wrapper-133percent-grampians" style="min-width: 172px;">
<div class="inner"><img class="element-to-stretch-grampians alignleft" src="http://www.rosstheexplorer.com/wp-content/uploads/2016/05/venus-baths-test2-225x300.jpg" alt="venus baths test2" /></div>
</div>

<div class="wrapper-75percent-grampians"  style="min-width:172px;" >
<div class="inner"><img class="element-to-stretch-grampians alignnone" src="http://www.rosstheexplorer.com/wp-content/uploads/2016/05/IMGP0038-300x225.jpg" alt="IMGP0038" /></div>
</div>

I have an instruction "min: width: 172px" because I wanted the two images to be displayed on top of each other when displayed on mobile devices. When the images were displayed side by side on mobile devices, the images were too small.

, 172 , 172 . . .

Answer 1

, 33%

.wrapper-133percent-grampians {
    width: 33.9%;
    float: left;
}

, , 33% . . , .

//for desktop applications
@media screen and (max-width: 499px) {
    .wrapper-133percent-grampians {
        width: 80%;
        float: left;
    }
}

//for mobile devices
@media screen and (min-width: 500px) {
    .wrapper-133percent-grampians {
        width: 33.9%;
        float: left;
    }
}