如何使图像占据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中的顶部和底部来定位图像。

Answer 2

使用带有背景图像的div。将其高度设置为100％，背景位置设置为中心，背景尺寸设置为可覆盖。

.card-img-top {
  height: 100%;
  background-size: cover;
  background-position: center;
}

在引导卡中工作时，我用笔叉了。 https://codepen.io/Jason_B/pen/RmdoaQ

Answer 3

似乎您正在使简单的布局更加复杂。 在这种情况下，您不需要使用职位属性。这将使简单的布局更加复杂。

在不同的情况下，如何在网页中更有效地使用图像，例如还要考虑其高度，宽度和纵横比。

我已经创建了一个代码段，希望对您有用。 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>