Question

我有一个正方形网格。我想通过指定尺寸来缩小图片的尺寸，同时保留2x2形状或3x3形状等。尝试设置width属性，但是没有用。目前太大了。我该如何解决？

<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

Answer 1

这是CSS中的一种方法，使用grid-template-columns寻找Bootstrap方式

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>

另一个有用的网站：

https://webdesign.tutsplus.com/tutorials/create-a-css-grid-image-gallery-with-blur-effect-and-interaction-media-queries--cms-32287

HTML Create an Equal Size Square Grid Picture System

Specify Number of Rows and Columns in Grid

HTML Specify Divider gap measurement in Square Grid Picture

Answer 2

希望这对您有帮助吗？

<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 no-gutters">
       <div class="col-md-6">
          <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image" alt="Fruit" style="width:100%;height:400px">
       </div>
       <div class="col-md-6">
          <img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg" alt="Fruit" style="width:100%;height:400px">
       </div>
       <div class="col-md-6">
          <img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png" alt="Book" style="width:100%;height:400px">
       </div>
       <div class="col-md-6">
          <img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg" alt="Book" style="width:100%;height:400px">
       </div>
    </div>
</div>

Answer 3

所有图片的尺寸均应相同，例如512 * 512px。

<div class="row">
            <div class="col-md-12 p-0">
                <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image"
                    class="">
                <img
                    src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7" style="margin-left:-4px;">
            </div>
        </div>

HTML指定方格图片系统的长度和宽度

3 个答案: