我有一张带有以下图片的引导卡。 我要插入一张图片网格,而不是一张图片。我将如何进行?尝试结合使用会产生带有空白的错位设计
引导卡代码:
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
网格图像代码:
<div class="grid-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</div>
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-gap: 0em;
padding: 0px;
}
img {
width: 100%;
height: auto;
padding: 0px;
}
尝试合并会产生带有空白的错位设计:
<div class="card" style="width: 18rem;">
<div class="grid-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
使用MVC网络核心
答案 0 :(得分:1)
将列的宽度从100px
更改为1fr
,并且无论.card
的宽度如何都可以使用
.card {
width:18rem;
background: pink;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0;
padding: 0px;
}
img {
width: 100%;
height: auto;
padding: 0px;
}
<div class="card">
<div class="grid-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
答案 1 :(得分:1)
这是您的解决方案。
.card {
width:18rem;
}
.grid-container {
display: grid;
margin:auto;
grid-template-columns: auto auto; /* The grid-template-columns property specifies the number (and the widths) of columns in a grid layout. */
}
img {
width: 100%;
height: auto;
padding: 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="card">
<div class="grid-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</div>
<div class="card-body">
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
</div>
答案 2 :(得分:0)