Question

我在html和css中创建了一个带有“blog”标题部分的网页。我希望博客包含一个具有相同高度（宽度符合自然尺寸）的x图像的响应网格，以及根据视口宽度显示在y行中的相同填充。在分成多行之前，我认为最好先创建一个长行的所有图像。我的问题是 - 如何根据视口高度为行中的所有图像指定相同的高度（和相应的宽度）？高度应以像素为单位确定为视口高度的固定百分比（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>

的script.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属性？

您可以为图片分配课程，并抓住＆＃39;他们使用jQuery选择器： $('.class-name')。然后，您将遍历返回的集合，以设置每个集合的属性。这可能是你绊倒的一件事：

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

实际上是将blogPostImg设置为元素数组。您将不得不设置迭代它的东西，如forEach循环，以在每个循环上设置属性。

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

一个jsfiddle真的很有帮助，看看你编写的代码到底是如何工作的。

根据视口高度

1 个答案: