html - 如何使图像占据 DIV 的完整尺寸？

Question

我为我的网站创建了一个自定义“产品卡片”，我希望图像采用父级的完整宽度和高度，而不管图像的尺寸如何。我试过 max-width min-width max-height min-height 似乎都不起作用。我想不出任何其他解决方案。我附上了一张我想要的和我现在正在取得的成就的图片。

https://codepen.io/paulamourad/pen/MdxedG

Answer 1

如果您想保持宽高比并且不介意裁剪:

.product-img-container {
    width: 100%;
    height: 260px;
    display: inline-block;
    position: relative;
    overflow:hidden; //This will crop off image portions that overflow the container
}

.card-img-top {
    width: 100%; /*If you specify only width, height will be calculated automatically 
    and aspect ratio is maintained. Similarly, if only height is specified, width is 
    calculated automatically */ 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 0px;
}

您可以使用 .card-img-top 中的顶部和底部来定位图像。