图片无法在CSS网格中拉伸

时间:2019-07-02 07:17:57

标签: html css

由于某些原因,这些图像不会延伸到CSS网格容器中。 我该如何解决?我可以介绍什么CSS属性?拉伸,填充?

基本上,图像不会延伸到父级中(无需阅读下面的所有代码)。它应该是一个简单的CSS修复程序。 点击图片放大:您将看到图片的右侧空间

没有Bootstrap的代码段无法正常工作:我没有放在那儿

#gridid7613b20dcbdd4fbea42f3936ce0b3565.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-gap: 0em;
  padding: 0px;
  align-items: stretch;
}

img {
  width: 100%;
  height: auto;
  padding: 0px;
  background-color: white;
  align-items: stretch;
}

.cardcheckbox {
  position: absolute;
  right: 12px;
  top: 5px;
  vertical-align: middle;
  float: right;
  visibility: hidden;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css">
<div class="card" style="width: 20.00rem; ">
  <!--Accordion wrapper-->
  <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
    <!-- Accordion card -->
    <div cardcheckbox="" id="checkboxdiv">
      <input type="checkbox" class="cardcheckbox" id="checkid">
    </div>
    <div id="gridid7613b20dcbdd4fbea42f3936ce0b3565" class="grid-container">
      <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image "><img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7 "></div>

    <!-- Card header -->
    <div class="card-header " role="tab " id="headingOne1 ">
      <a class="accordion-toggle collapsed " data-toggle="collapse " data-parent="#accordionEx " href="#id7613b20dcbdd4fbea42f3936ce0b3565 " aria-expanded="true " aria-controls="id7613b20dcbdd4fbea42f3936ce0b3565 ">Tree
					</a>
    </div>
    <!-- Card body -->
    <div id="id7613b20dcbdd4fbea42f3936ce0b3565 " class="collapse " role="tabpanel " aria-labelledby="headingOne1 " data-parent="#accordionEx ">
      <div class="card-body "> Tree with leaves
      </div>
    </div>
  </div>
</div>

点击图片放大:您将看到图片的正确空间 enter image description here

0 个答案:

没有答案