【发布时间】：2019-10-19 12:12:26
【问题描述】：
我为我的网站创建了一个自定义“产品卡片”，并且我希望图像采用父级的全宽和全高，而不管图像的尺寸如何。我试过max-widthmin-widthmax-heightmin-height，但似乎都没有。我想不出任何其他解决方案。我附上了一张我想要什么以及我现在正在实现什么的图像。
【问题讨论】：
标签： html css image bootstrap-4
【发布时间】：2019-10-19 12:12:26
【问题描述】：
您似乎使简单的布局变得更加复杂。 在这种情况下，您不需要使用位置属性。这会使简单的布局变得更加复杂。
如何在网页中更有效地使用图像有不同的场景，例如考虑它们的高宽和纵横比。
我创建了一个片段，希望对您有用。 Bootstrap Cards Snippet
对于动态产品卡片图片，请使用以下 CSS 属性：
.card-img-top {
height: 100px; /* Change it based upon requirement */
object-fit: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<h2>Bootstrap Cards Varation: </h2>
<h3>Same Aspect Ratio ―</h3>
<div class="row mb-5">
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1920x1080" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1920x1080" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1920x1080" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<!-- row -->
<h3>Same height for image (Suitable for dynamic different size images) ―</h3>
<style>
.cstm-height-card .card-img-top {
height: 100px;
object-fit: cover;
}
</style>
<div class="row mb-5 cstm-height-card">
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1200x900" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1500x800" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1400x700" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<!-- row -->
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="row no-gutters align-items-center">
<div class="col-md-4">
<img src="https://source.unsplash.com/random/600x800" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-3">
<div class="row no-gutters align-items-center">
<div class="col-md-4">
<img src="https://source.unsplash.com/random/600x800" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- row -->
</div>【讨论】：
-
这行得通！关于如何使图像始终水平和垂直居中的任何想法？
如果您想保持纵横比并且不介意裁剪：
.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 中的顶部和底部来定位图像。
【讨论】：
使用带有背景图片的 div。将其高度设置为 100%，将背景位置设置为居中，并将背景大小设置为覆盖。
.card-img-top {
height: 100%;
background-size: cover;
background-position: center;
}
在引导卡中工作，我叉了你的笔。 https://codepen.io/Jason_B/pen/RmdoaQ
【讨论】：