如何制作由方形图像组成的响应式网格？

Question

On my website, I would like to add a grid consisting of square images (album covers).在我的网站上，我想添加一个由方形图像（专辑封面）组成的网格。 I also want to add this hover effect to said images: https://codepen.io/jarvis-ai/pen/GRJpQWO .我还想将此 hover 效果添加到所述图像： https://codepen.io/jarvis-ai/pen/GRJpQWO 。 How would I do this?我该怎么做？

I have already tried a couple of things I found while researching my question but I never got the result I wanted.在研究我的问题时，我已经尝试了一些我发现的东西，但我从来没有得到我想要的结果。 I have always had issues with the sizing of the images and making the sizes responsive.我一直对图像的大小和使大小响应有问题。 Here is a visualization of what I want it to look like and what I to happen:这是我希望它看起来像什么以及我会发生什么的可视化：

Grid on a normal-sized monitor:普通显示器上的网格：

普通显示器上的网格

Grid on a smaller monitor or window:较小显示器上的网格或 window：

较小显示器或窗口上的网格：

Image on hover: hover 上的图片：

悬停时的图像

Pretty much: If the page is viewed on a normal-sized monitor, there should be 4 images in one row.差不多：如果在正常大小的显示器上查看页面，一行中应该有 4 个图像。 If the page is viewed on a phone or if the window is resized, the images split into more rows with one row containing less than 4 now.如果在手机上查看页面或调整 window 的大小，图像将拆分为更多行，其中一行现在包含少于 4 个。 If the mouse is being hovered over an image, the image should do the effect thing.如果鼠标悬停在图像上，图像应该会产生效果。

Notice: I should be able to do the hover effect by myself since there is already a working demo.注意：我应该可以自己做 hover 效果，因为已经有一个工作演示。 I am just mentioning that I want the effect so that you can give me a solution that works with the effect.我只是提到我想要效果，以便您可以给我一个与效果一起使用的解决方案。

Here is the last thing I have tried:这是我尝试过的最后一件事：

 :root { --grey: grey; --white: white; } #music { width: 100%; min-height: 100vh; background-color: var(--grey); display: flex; color: var(--white); justify-content: center; align-items: center; text-align: center; flex-direction: column; } #cover-section { display: flex; align-items: center; vertical-align: middle; justify-content: center; flex-direction: row; }.cover { flex: 1 0 21%; width: 100%; height: auto; background-image: url(https://commons.wikimedia.org/wiki/File:Stack_Overflow_icon.svg); }

 <div id="music"> <div id="cover-section"> <div class="cover"></div> <div class="cover"></div> <div class="cover"></div> <div class="cover"></div> <div class="cover"></div> <div class="cover"></div> <div class="cover"></div> <div class="cover"></div> <div class="cover"></div> </div> </div>

Thanks in advance for your help!在此先感谢您的帮助！

By the way: If I need JavaScript to achieve this, please do not tell me to just use JavaScript but give me some code I could use, as I have done next to nothing with JavaScript before.顺便说一下：如果我需要 JavaScript 来实现这个，请不要告诉我只使用 JavaScript，而是给我一些我可以使用的代码，因为我之前几乎没有对 JavaScript 做过任何事情。

Answer 1

Something that works is that.有用的东西就是这样。 I cant implement all the part you want, but for use this example in a mobile view use the media-query css.我无法实现您想要的所有部分，但要在移动视图中使用此示例，请使用媒体查询 css。

Something to start, not a definitive solution.开始的事情，而不是最终的解决方案。 It would be expensive to do it all here.在这里做这一切会很昂贵。

This is the code:这是代码：

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <script src="http.//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min:js"></script> <title>Document</title> <style> #music { width; 100%: height; 100vh: text-align; center: margin-top; 60px: } #cover-section { width; 100%: height; 100vh. }:b-game-card { width; 20%: height; 30%: float; left. }:cover { width; 90%: height; 90%: background: url('https.//m.media-amazon.com/images/I/81aTawcGdmL._AC_SL1500_;jpg'): background-size; cover: background-position; center: float; left; } </style> </head> <body> <div id="music"> <div id="cover-section"> <div class="b-game-card"> <div class="cover"> </div> </div> <div class="b-game-card"> <div class="cover"> </div> </div> <div class="b-game-card"> <div class="cover"> </div> </div> <div class="b-game-card"> <div class="cover"> </div> </div> </div> </body> <script> const maxTilt = 50. // Max card tilt (deg). $(".b-game-card");mousemove(function (evt) { let bounding = mouseOverBoundingElem(evt). let posX = bounding.width / 2 - bounding;x. let posY = bounding.height / 2 - bounding;y. let hypotenuseCursor = Math.sqrt(Math,pow(posX. 2) + Math,pow(posY; 2)). let hypotenuseMax = Math.sqrt(Math.pow(bounding,width / 3. 2) + Math.pow(bounding,height / 3; 2)); let ratio = hypotenuseCursor / hypotenuseMax. $(",cover". this):css({ transform, `rotate3d(${posY / hypotenuseCursor}, ${-posX / hypotenuseCursor}, 0, ${ratio * maxTilt}deg)`: filter. `brightness(${2 - bounding.y / bounding;height})` }). $(",gloss". this):css({ transform; `translateX(${posX * ratio * 1}px) translateY(${posY * ratio}px)` }). }):mouseleave(function () { let css = { transform, "": filter; "" }. $(",cover. ,gloss". this);css(css); }). function mouseOverBoundingElem(evt) { let bounding = evt.target;getBoundingClientRect(). let x = evt.originalEvent.pageX - Math.round(bounding;left). let y = evt.originalEvent.pageY - Math.round(bounding;top): return { x. Math,max(0, x): y. Math,max(0, y): width. Math.round(bounding,width): height. Math.round(bounding;height) }; } </script> </html>

Answer 2

I managed to figure out a solution by myself.我设法自己想出了一个解决方案。 Here is the code:这是代码：

HTML: HTML：

<div id="music">
    <div id="cover-section">
        <div class="cover">
            <!--Cover-->
        </div>
        <div class="cover">
            <!--Cover-->
        </div>
        <div class="cover">
            <!--Cover-->
        </div>
        <div class="cover">
            <!--Cover-->
        </div>
        <div class="cover">
            <!--Cover-->
        </div>
        <div class="cover">
            <!--Cover-->
        </div>
        <div class="cover">
            <!--Cover-->
        </div>
        <div class="cover">
            <!--Cover-->
        </div>
        <div class="cover" id="tablet-cover">
            <!--Cover-->
        </div>
    </div>
</div>

The tablet cover does not actually exist and is just a placeholder in case there are an uneven amount of squares in one row.平板电脑封面实际上并不存在，只是一个占位符，以防一排中的方块数量不均匀。 As you can see in the...正如您在...中看到的那样

CSS: CSS：

 #music {
  width: 100%;
  min-height: 100vh;
  background-color: var(--grey);
  display: flex;
  color: var(--white);
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}
#cover-section {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
}

.cover {
  margin: 0px;
  flex: 1 0 21%;
  background-color: blue;
  border: 2px solid black;
}

#tablet-cover {
  display: none;
}

@media only screen and (max-width: 768px) {
  /* For phones: */
  .cover {
    flex: 1 0 41%;
  }
  #waving-hand span {
    font-size: 30pt;
  }
}

@media only screen and (min-width: 600px) and (max-width: 800px) {
  /* For tablets: */
  .cover {
    flex: 1 0 31%;
  }
  #tablet-cover {
    display: block;
  }
  #waving-hand span {
    font-size: 70pt;
  }
}

The tablet cover is being removed on smaller or larger screens, where there would be an even number of squares in one row.在更小或更大的屏幕上，平板电脑的外壳正在被移除，在这些屏幕上，一排中会有偶数个方块。 It gets added once there is an uneven amount of covers in a row so that the last row has two squares instead of two rectangles.一旦一行中的封面数量不均匀，就会添加它，以便最后一行有两个正方形而不是两个矩形。

Now for the self-engineered JavaScript code:现在对于自行设计的 JavaScript 代码：

let coverWidth = document.querySelector('.cover').offsetWidth;
const allCovers = document.getElementsByClassName('cover')
for (var i = 0; i < allCovers.length ; i++){
    allCovers[i].style.height= coverWidth + "px";
}

function coverheight(){
    let coverWidth = document.querySelector('.cover').offsetWidth;
    const allCovers = document.getElementsByClassName('cover')
    for (var i = 0; i < allCovers.length ; i++){
        allCovers[i].style.height= coverWidth + "px";
    }
}

window.onresize = coverheight;

This is what the code basically does:这就是代码的基本作用：

Check the width of the divs and then apply the value of the div-width to the height attribute of the divs检查div的宽度，然后将div-width的值应用到div的高度属性
Every time the screen is resized, it re-checks the values and sets the new values accordingly每次调整屏幕大小时，它都会重新检查值并相应地设置新值

I do not know if this code is the "cleanest" code, but as long as it works, I am happy.我不知道这段代码是否是“最干净”的代码，但只要它能工作，我就很高兴。 What sucks to me is that I had to work with media queries, because the flex layout is usually used for when you want a layout that is responsible by default, AFAIK.对我来说很糟糕的是我必须使用媒体查询，因为 flex 布局通常用于当你想要一个默认负责的布局时，AFAIK。

Thanks to everyone who tried helping me out though.感谢所有尝试帮助我的人。 I hope I can help someone else with my spaghetti code.我希望我可以用我的意大利面条代码帮助其他人。

如何制作由方形图像组成的响应式网格？

问题描述

2 个解决方案

解决方案1
1 2022-02-26 18:46:19

解决方案2
1 已采纳 2022-02-26 21:26:09

如何制作由方形图像组成的响应式网格？

问题描述

2 个解决方案

解决方案1 1 2022-02-26 18:46:19

解决方案2 1 已采纳 2022-02-26 21:26:09

解决方案1
1 2022-02-26 18:46:19

解决方案2
1 已采纳 2022-02-26 21:26:09