-1

I'm making a album page with HTML and CSS and I want to set my height of the image to be 9/16 of the width.

HTML code

<div class = "col-md-12" id = "album-list">
    <div class = "col-md-4">
        <div id = "album-card" style = "border: 1px solid grey;">
            <img class = "image_thumbnail" src = "images/sampleImage.jpg" alt = "Thumbnail" />
            <div style = "padding-top: 10px; padding-bottom: 5px;">
                <p class = "card-text"><strong>TITLE HERE</strong></p>
            </div>
        </div>
    </div>
    <!-- More Columns -->
</div>

CSS style

.image_thumbnail {
    width: 100%;
}

I saw some posts on stackoverflow with similar questions, and the answer was to use padding-bottom to set the height according to the width. However, since I gave border around #album-card, #album-card gets longer in height than it's supposed to be.

How can I set the heigth 9/16 of the width??

cylee
  • 550
  • 6
  • 21
  • Should be a duplicate? https://stackoverflow.com/questions/10062811/can-i-set-the-height-of-a-div-based-on-a-percentage-based-width – bruce182 Jan 25 '18 at 13:20

2 Answers2

0

To convert the images:

var images = document.querySelectorAll('.image_thumbnail');
for (var i = 0; i < images.length; i++) {
    images[i].height = images[i].width * 0.5625;
}

This will select all the images on the page with the according class and will directly convert the height relative to their width (as: 16 / 9 = 0.5625).

Levano
  • 319
  • 1
  • 2
  • 15
0

With the help calc() in css3 you can calculate width.

.image_thumbnail {
    width: calc((100%*9)/16);
}

This is Referance calc(), This may be helpful for you.

Tushar Acharekar
  • 880
  • 7
  • 21