如何制作由方形图像组成的响应式网格？
[英]How do I make a responsive grid consisting of square images?
问题描述
在我的网站上，我想添加一个由方形图像（专辑封面）组成的网格。 我还想将此 hover 效果添加到所述图像： https://codepen.io/jarvis-ai/pen/GRJpQWO 。 我该怎么做？
在研究我的问题时，我已经尝试了一些我发现的东西，但我从来没有得到我想要的结果。 我一直对图像的大小和使大小响应有问题。 这是我希望它看起来像什么以及我会发生什么的可视化：
- 普通显示器上的网格：
- 较小显示器上的网格或 window：
- hover 上的图片：
差不多：如果在正常大小的显示器上查看页面，一行中应该有 4 个图像。 如果在手机上查看页面或调整 window 的大小，图像将拆分为更多行，其中一行现在包含少于 4 个。 如果鼠标悬停在图像上，图像应该会产生效果。
注意：我应该可以自己做 hover 效果，因为已经有一个工作演示。 我只是提到我想要效果，以便您可以给我一个与效果一起使用的解决方案。
这是我尝试过的最后一件事：
: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>
在此先感谢您的帮助！
顺便说一下：如果我需要 JavaScript 来实现这个，请不要告诉我只使用 JavaScript，而是给我一些我可以使用的代码，因为我之前几乎没有对 JavaScript 做过任何事情。
2 个解决方案
解决方案1
1 2022-02-26 18:46:19
有用的东西就是这样。 我无法实现您想要的所有部分，但要在移动视图中使用此示例，请使用媒体查询 css。
开始的事情，而不是最终的解决方案。 在这里做这一切会很昂贵。
这是代码：
<,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>
解决方案2
1 已采纳 2022-02-26 21:26:09
我设法自己想出了一个解决方案。 这是代码：
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>
平板电脑封面实际上并不存在，只是一个占位符，以防一排中的方块数量不均匀。 正如您在...中看到的那样
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;
}
}
在更小或更大的屏幕上，平板电脑的外壳正在被移除，在这些屏幕上，一排中会有偶数个方块。 一旦一行中的封面数量不均匀，就会添加它，以便最后一行有两个正方形而不是两个矩形。
现在对于自行设计的 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;
这就是代码的基本作用：
- 检查div的宽度，然后将div-width的值应用到div的高度属性
- 每次调整屏幕大小时，它都会重新检查值并相应地设置新值
我不知道这段代码是否是“最干净”的代码，但只要它能工作，我就很高兴。 对我来说很糟糕的是我必须使用媒体查询，因为 flex 布局通常用于当你想要一个默认负责的布局时，AFAIK。
感谢所有尝试帮助我的人。 我希望我可以用我的意大利面条代码帮助其他人。
如何使 Vuetify 轮播图像响应，尤其是在移动屏幕上？
[英]how do I make Vuetify carousel images responsive especially on mobile screens?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.