Question

事实证明，我的img是圆角的。我需要将它们的形状设置为方形。.CSS是否有问题？这就是它的样子。

谢谢，这对我有很大帮助！

这是我的img CSS：

 .img-wrap {
      position: relative;
      width: 250px;
      height: 150px;
      overflow: hidden;
      border-radius: 0px;
    }

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

这是我的卡布局：

  <div class="col-xs-6 col-sm-4 col-lg-3">
                    <div class="thumb">
                     <div class="caption card card-default">
                        <div class="img-wrap">
                          <img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-wrap__img" 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>

希望您能理解我的解释

Answer 1

添加!important可以帮助您解决问题，但是我的建议请勿使用，重要规则会覆盖该特定属性。

这是一个链接，可帮助您何时使用它https://css-tricks.com/when-using-important-is-the-right-choice/

像fin1x一样，您必须重写了border-radius属性。检查您的CSS并查看您可能还在其他地方使用过它。

.img-wrap {
      position: relative;
      width: 250px;
      height: 150px;
      overflow: hidden;
      border-radius: 0px; !important
    }

     .img-wrap__img {
       position: absolute;
       width: 100%;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       border-radius: 0px; !important
     }

更改此img方块并在卡内进行响应

1 个答案: