Currently, I am working on a website using HTML and CSS, specifically focusing on a "blog" header section. I am aiming to create a responsive grid layout featuring x images with equal heights (width adjusted according to their natural dimensions) and consistent padding, arranged in y rows based on the viewport width. My initial approach involved placing all images in a single row before considering splitting them into multiple rows. My main query revolves around determining how to assign a uniform height (and corresponding widths) to all images in the row based on the viewport height. The height should be specified in pixels as a fixed percentage relative to the viewport height, keeping in mind different minimum-width scenarios (480px, 768px, 1140px).
This is the solution I have devised:
HTML
<ul class="blogGrid">
<li>
<img class="blogPost" src="//dummyimage.com/400x300/000/fff&text=hello+world" />
</li>
<li>
<img class="blogPost" src="//dummyimage.com/100x100/000/fff&text=hello+world" />
</li>
...
</ul>
script.js
/** A utility function to calculate the common image height in pixels based on a fixed
* percentage of the viewport height per media screen
*/
var imageHeight = function getImageHeight(h) {
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
if (h >= 1140) {
imageHeight = 0.26 * h;
} else if (h >= 768) {
imageHeight = 0.32 * h;
} else (h >= 480) {
imageHeight = 0.34 * h;
}
return imageHeight;
};
/** A utility function to calculate the local image widths in pixels based on each image's natural
* dimensions
*/
var imageWidth = function getImageWidth(imageHeight, naturalWidth, naturalHeight) {
return (naturalWidth / naturalHeight) * imageHeight;
};
/** Assigns height and width to each image
*/
var blogPostImg = document.getElementsByClassName('blogPost');
if (blogPostImg && blogPostImg.style) {
blogPostImg.style.height = imageHeight;
blogPostImg.style.width = imageWidth;
}
css
body {
margin: 0;
}
ul.blogGrid {
list-style: none;
padding: 0;
margin: 0;
display: table;
border-collapse: collapse;
}
.blogGrid li {
display: table-cell;
}
.blogGrid li img {
display: block;
height: 300px;
padding: 5px;
}
Unfortunately, my current implementation is not functioning as expected, leaving me in a state of uncertainty. While I have been exploring JavaScript solutions, my lack of experience in this area is evident. I am reaching out for guidance, feedback, code examples, or any form of support from the community. I am eager to learn and improve, and any input is greatly valued. Thank you in advance for your assistance!
ANY COMMENTS ON MY CODE, TIPS, CODE SNIPPETS, INTEREST, ANYTHING..! IS HIGHLY APPRECIATED. THANK YOU