您好,我对此很陌生,我想弄清楚如何缩放和裁剪这些图像以适合每个网格正方形而没有边框...
我也不知道这是否是设置图像的有效方法。我希望每个正方形都有一个不同的图像,但是现在如何设置,我必须为每个正方形创建一个新的.box .inner#
。如果有更好的方法来构造它,那将真的很有帮助。
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box .inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.box .inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner1">2</div>
</div>
<div class="box">
<div class="inner1">3</div>
</div>
<div class="box">
<div class="inner1">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner2">5</div>
</div>
<div class="box">
<div class="inner2">6</div>
</div>
<div class="box">
<div class="inner2">7</div>
</div>
<div class="box">
<div class="inner2">8</div>
</div>
</div>
</div>
答案 0 :(得分:1)
您可以这样做:
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box > div {
background-size:cover;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
}
.inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
}
.inner3 {
background-image: url("https://picsum.photos/200/200?3");
}
.inner4 {
background-image: url("https://picsum.photos/200/200?4");
}
.inner5 {
background-image: url("https://picsum.photos/200/300?5");
}
.inner6 {
background-image: url("https://picsum.photos/200/300?6");
}
.inner7 {
background-image: url("https://picsum.photos/200/200?7");
}
.inner8 {
background-image: url("https://picsum.photos/200/300?8");
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner2">2</div>
</div>
<div class="box">
<div class="inner3">3</div>
</div>
<div class="box">
<div class="inner4">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner5">5</div>
</div>
<div class="box">
<div class="inner6">6</div>
</div>
<div class="box">
<div class="inner7">7</div>
</div>
<div class="box">
<div class="inner8">8</div>
</div>
</div>
</div>
答案 1 :(得分:0)
我不太确定这是否可以解决您的问题,但可能会取消CSS文件中.box类的空白。 not enough reputation yet so click this link
与其将边距设置为5px,而不是将其更改为0px,看看是否有帮助。
对于不同的图像,您只需要为每个图像创建一个新类,然后将新图像链接到该类,然后像以前的前两个一样将其链接起来即可。