javascript - 根据视口(viewport)高度为 x 图像行分配相同的高度

Question

我正在用 html 和 css 创建一个带有“博客”标题部分的网页。我希望博客包含具有相同高度(宽度符合自然尺寸)和根据视口(viewport)宽度在 y 行中显示相同填充的 x ​​图像的响应网格。在分成多行之前，我认为最好先创建一长行所有图像。我的问题是 - 如何根据视口(viewport)高度为行中的所有图像分配相同的高度(和相应的宽度)？高度应以像素为单位确定为视口(viewport)高度的固定百分比(3 最小宽度:480 像素、768 像素、1140 像素)。

这是我想出的:

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>

脚本.js

/** Helper function to extract common image height in pixels as a fixed percentage 
 *of viewport height according to 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;
};

/** Helper function to extract local image widths in pixels according to 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;
}

但它不起作用，现在我被卡住了。我最近研究了一些 javascript，但我承认我现在真的不知道自己在做什么。我真的不想冒犯任何在这种复杂情况下寻求建议的人，显然我是一个菜鸟，但我不知道还能去哪里问，我真的很想学习。

对我尝试编写的代码的所有评论、提示、代码示例、兴趣等等……!非常感谢。谢谢你

Answer 1

您是否尝试过使用 jQuery 来操作您的 DOM 属性？

您可以为图像分配类并使用 jQuery 选择器“抓取”它们:$('.class-name')。然后，您将遍历返回的集合以设置每个集合的属性。这是一件事可能会绊倒你:

var blogPostImg = document.getElementsByClassName('blogPost');

实际上是将 blogPostImg 设置为一个元素数组。您将必须设置一些遍历它的东西，例如 forEach 循环，以在每个循环上设置属性。

另一种解决方案是将所有图像包裹在 div 行中，根据 vh 设置高度，然后使用 overflow: hidden; 裁剪内容。不过，这不会缩放图像 - 只是裁剪它。

jsfiddle 将非常有助于准确了解您编写的代码如何无法正常工作。