Question

是否对此有img调整大小，以便它们可以具有相同的比例？因为如果不是同一图像比例，就会发生这种情况。我的问题是，一切都变成了这样。

这是我的卡片的html代码：

 <div class="container">
      <div class="flex-row row">
  <div class="col-xs-6 col-sm-4 col-lg-3">
                    <div class="thumb">
                     <div class="caption card card-default">
                        <div class="card-img">
                          <img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-thumbnail" height="100">
                        </div>
                        <!-- Extra div added to enable alignment at bottom -->
                        <div class="excludingImage">
                          <div class="card-body">
                            <p class="card-text" style="color:#00873a"><b><?php echo $cartname ?></b></p>
                            <p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱<?php echo $orig ?>.00</strike> ₱<?php echo $cartprice ?>.00</p>
                          </div>
                          <div class="card-footer text-center">
                            <a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink btn-sm"><i class="fa fa-shopping-cart"></i> View Product </button></a></div>
                        </div>
                      </div>
                      <!-- /.caption -->
                    </div>
                    <!-- /.thumbnail -->
                  </div>
               </div></div>

这是我的CSS：

/* Flexbox Equal Height Bootstrap Columns (fully responsive) */
@media only screen and (min-width : 500px) {
  .flex-row.row {
    display: flex;
   flex-wrap: wrap;
  }
  .flex-row.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
  }
  .flex-row.row:after, 
  .flex-row.row:before {
   display: flex;
  }
  .flex-row.row > [class*='col-'] > .box {
   display: flex;
   flex: 1;
  }
}


/* Grow thumbnails to fill columns height */
.flex-row .thumb,
.flex-row .caption {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

/* Flex Grow Text Container */
.flex-row .caption p.flex-text {
  flex-grow: 1;
}

/* Flex Responsive Image */
.flex-row img {
  width: 100%;
  height: auto;
}

.thumb{
  padding-bottom: 10px;
}

.caption{

}
/* EXAMPLE 2 - CSS TABLES EQUAL HEIGHT
   - ie9 support 
   - not responsive (mobile fallback)
*/

.table-row.row,
.table-row-equal {
  display: table;
  width: 100%;
  table-layout: fixed;
  word-wrap: break-word;
}
.table-row.row [class*="col-"] {
  width: 25%;
}
.table-row.row [class*="col-"],
.table-row-equal .thumb {
  float: none;
  display: table-cell;
  vertical-align: top;
}
.table-row-equal {
  border-spacing: 30px 0px;
}
.table-row-equal .thumb {
  width: 1%;
}
/* mobile fallback to support partial responsiveness */
@media only screen and (max-width: 500px) {
  .table-row-equal .thumb {
    display: block;
    width: 100%;
  }
}


/* MASONARY BOOTSTRAP 3 GRID
   - Who needs V4?
*/
.masonary-row.row {
  -webkit-column-gap: 30px;
  column-gap: 30px;
  padding-left: 15px;
  padding-right: 15px;
  word-wrap: break-word;
  -webkit-column-fill: balance;
          column-fill: balance;
}
.masonary-row [class*="col-"] {
  display: inline-block;
  width: 100%;
  height: 100%;
  float: none;
  padding: 0px;
  -webkit-column-fill: balance;
          column-fill: balance;
}


@media (min-width: 480px) {
  .masonary-row.row {
    -webkit-column-count: 2;
    column-count: 2;
  }
}
@media (min-width: 768px) {
  .masonary-row.row {
    -webkit-column-count: 3;
    column-count: 3;
  }
}


/* demo */
.bootflex .well {
      flex-grow: 1;
  }

/* pre hack for small devices */
pre {
  display: flex;
  flex: 1;
}
.flex-row.flex-code.row > [class*='col-'] .flex-text {
  flex-grow: 1;
  display: flex;
}


.overview {
  display: flex;
  padding-right: 10px;
}

.card-default {
  display: flex;
  flex-wrap: wrap;
}

.card-default>* {
  width: 100%;
}

.excludingImage {
  align-self: flex-end;
  text-align: center;
}


.card {
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;

}

.card>.card-link {
  color: #333;
}

.card>.card-link:hover {
  text-decoration: none;
}

.card>.card-link .card-img img {
  border-radius: 6px 6px 0 0;
}

.card .card-body {
  /* display: table;
  width: 100%; */
  padding: 12px;
}

.card .card-header {
  border-radius: 6px 6px 0 0;
  padding: 8px;
}

.card .card-footer {
  border-radius: 0 0 6px 6px;
  padding: 8px;
}

/*
.card .card-left {
  position: relative;
  float: left;
  padding: 0 0 8px 0;
}


.card .card-right {
  position: relative;
  float: left;
  padding: 8px 0 0 0;
}
*/
.card .card-body h1:first-child,
.card .card-body h2:first-child,
.card .card-body h3:first-child, 
.card .card-body h4:first-child,
.card .card-body .h1,
.card .card-body .h2,
.card .card-body .h3, 
.card .card-body .h4{ margin-top: 0; }
.card .card-body .heading{ display: block;  }
.card .card-body .heading:last-child{ margin-bottom: 0; }

.card .card-body .lead{ text-align: center; }

@media( min-width: 768px ){
  .card .card-left{ float: left; padding: 0 8px 0 0; }
  .card .card-right{ float: left; padding: 0 0 0 8px; }

  .card .card-4-8 .card-left{ width: 33.33333333%; }
  .card .card-4-8 .card-right{ width: 66.66666667%; }

  .card .card-5-7 .card-left{ width: 41.66666667%; }
  .card .card-5-7 .card-right{ width: 58.33333333%; }

  .card .card-6-6 .card-left{ width: 50%; }
  .card .card-6-6 .card-right{ width: 50%; }

  .card .card-7-5 .card-left{ width: 58.33333333%; }
  .card .card-7-5 .card-right{ width: 41.66666667%; }

  .card .card-8-4 .card-left{ width: 66.66666667%; }
  .card .card-8-4 .card-right{ width: 33.33333333%; }
}

/* -- default theme ------ */
.card-default{ 
  border-color: #ddd;
  background-color: #fff;
  margin-bottom: 24px;
}
.card-default > .card-header,
.card-default > .card-footer{ color: #333; background-color: #fdfdfd; }
.card-default > .card-header{ border-bottom: 1px solid #ddd; padding: 8px; }
.card-default > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
.card-default > .card-body{  }
.card-default > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
.card-default > .card-left{ padding-right: 4px; }
.card-default > .card-right{ padding-left: 4px; }
.card-default p:last-child{ margin-bottom: 0; }
.card-default .card-caption { color: #fff; text-align: center; text-transform: uppercase; }


/* -- price theme ------ */
.card-price{ border-color: #999; background-color: #ededed; margin-bottom: 24px; }
.card-price > .card-heading,
.card-price > .card-footer{ color: #333; background-color: #fdfdfd; }
.card-price > .card-heading{ border-bottom: 1px solid #ddd; padding: 8px; }
.card-price > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
.card-price > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
.card-price > .card-left{ padding-right: 4px; }
.card-price > .card-right{ padding-left: 4px; }
.card-price .card-caption { color: #fff; text-align: center; text-transform: uppercase; }
.card-price p:last-child{ margin-bottom: 0; }

.card-price .price{ 
  text-align: center; 
  color: #337ab7; 
  font-size: 3em; 
  text-transform: uppercase;
  line-height: 0.7em; 
  margin: 24px 0 16px;
}
.card-price .price small{ font-size: 0.4em; color: #66a5da; }
.card-price .details{ list-style: none; margin-bottom: 24px; padding: 0 18px; }
.card-price .details li{ text-align: center; margin-bottom: 8px; }
.card-price .buy-now{ text-transform: uppercase; }
.card-price table .price{ font-size: 1.2em; font-weight: 700; text-align: left; }
.card-price table .note{ color: #666; font-size: 0.8em; }

谢谢！知道是否可以将img标签的大小调整为相同的宽度和高度，这对我很有帮助。所以我的卡片不会像上面那样。

Answer 1

您可以设置一个“框架”以裁剪/隐藏所需的额外宽度/高度，以便它们都被视为相同的尺寸，您需要将img包裹在div中，然后对它应用一些样式。

您可以在此处看到该概念。我已将图像裁剪到居中，但易于更改。

HTML

<div class="img-wrap">
  <img src="https://placehold.it/250x200" class="img-wrap__img">
</div>
<div class="img-wrap">
  <img src="https://placehold.it/550x700" class="img-wrap__img">
</div>

CSS

.img-wrap {
  position: relative;
  width: 200px;
  height: 150px;
  overflow: hidden;
}

 .img-wrap__img {
   position: absolute;
   width: 100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

Answer 2

您可以使用padding-top技巧来控制容器的长宽比。

HTML

<div class="square"
     style="background-image: url('https://dummyimage.com/120x80/000/fff.png')">
</div>

CSS

.square {
  width: 90px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-position: center center;
  background-repeat: no-repeat;
}
.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

图调整为相同的宽度和高度

2 个答案: