css - 如何使图像在物化卡中使用其父级的全高

Question

我正在为我的元素使用 materialize，但我在使用水平卡片时遇到了一些问题。我正在使用的图像的高度小于它的父 div，因此在它的末尾显示了背景颜色(problem image)。我尝试使用 max-width: 100% 和 max-height: 100% 什么都没有，我也尝试将图像作为 background-image 放在 CSS 而不是 img 标签中，但如果没有，则隐藏图像检测标签 ( problem with backgroung-image )我知道我应该拉伸(stretch)图像，但它只有几像素。为什么我要这样做？ bc 如果有大屏幕的人看到它没问题，但如果我尝试使用较小的屏幕，右边的文本列会变高，并且图像会停止覆盖行的孔高度。这就是我想要的 ( image: how it should be )

即使您没有回复，也感谢您的宝贵时间。来自智利的欢呼。

HTML代码

<div class="col s12 m6 l4 offset-m3 options">
        <div class="card">
          <div class="topTitleCard"><h5 class="" >Opción 3 |</p></div>
          <div class="card-image">
            <img src="./content/araucaria_v2.jpg">
            <div class="card-title">
              <h4 class="white-text textShadow thicker-font">Viajando en el Bosque Milenario</h4>
            </div>
            <a rel="addtoCart"  class="option3 btn-floating btn-large halfway-fab waves-effect waves-light mygreen" ><i class="material-icons">shopping_cart</i></a>
          </div>
          <div class="card-content">
            <br>
            <p>
              Escoge el mirador que más te llene de paz, para que el día de mañana, puedán esparcir tus cenizas en el lugar que tu escogiste. Obten calma por siempre con el sonido del agua corriendo, o por el sonido de las copas de las Araucarias y Coihues moviendose por el viento.
              <a href="#misOpciones" id="verVuela" rel="seeMore">Ver más...</a>
            </p>
          </div>
          <div>
            <div class="card-tabs">
              <h6 class="text-mygreen center-align">Ven y escoge tu vista para la eternidad:</h6>
              <br>
              <ul class="tabs tabs-fixed-width">
                <li class="tab"><a class="whichTree active" value="1" href="#test3-1" style="color:#0F0F0F;">Mirador</a></li>
              </ul>
            </div>
            <div class="card-content mygreen white-text myTabsCards">
              <div id="test3-1">
                <p>10 UF</p>
                <a class="option3 waves-effect waves-light btn buyBtn" rel="addtoCart">Comprar</a>
              </div>
              <div class="bottomTabsPrices">
                *precios validos hasta el 31/12/2019
              </div>
            </div>
          </div>
        </div>
      </div>

CSS 代码(不认为会有用，但无论如何都在这里):

.card-image{ 
margin-top:50px !important;
position: relative;
background-color: rgba(84,115,93,.5);
}
.card-image img{
max-width: 100%;
max-height:100%;
}

Answer 1

在你的图片上放这个css

width: 100%;
height: 100%;
object-fit:cover;

在图像上使用object-fit 时，您需要为其指定width 和height 属性。如果未指定 width 和 height，它不会与 max-width 和 max-height 一起使用。

它将始终填充图像的父级。它可能会在侧面切割，但这取决于图像和父级的纵横比。