我有一个方形网格。我想通过指定尺寸来缩小图片的尺寸,同时保留 2x2 形状或 3x3 形状等。尝试设置宽度属性但没有用。目前它太大了。 我将如何解决这个问题?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-6 p-0"><img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image" class="w-100 h-100"></div>
<div class="col-6 p-0"><img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7" class="w-100 h-100"></div>
<div class="col-6 p-0"><img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png" class="w-100 h-100"></div>
<div class="col-6 p-0"><img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn" class="w-100 h-100"></div>
</div>
</div>
即使图片较小,它们也应该边对边接触-
出于某种原因,这不起作用 make images the same size in bootstrap grid
最佳答案
这是CSS中的一种方式,寻找Bootstrap的方式,使用grid-template-columns
CSS:
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-gap: 0em;
padding: 0px;
}
img {
width: 100%;
height: auto;
padding:0px;
}
HTML:
<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>
另一个有用的网站:
HTML Create an Equal Size Square Grid Picture System
关于HTML指定方格图片系统的长宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56814559/