如何使图像占据DIV的完整尺寸? [英] How do I make an image take a DIV's full dimension?

问题描述

我已经为我的网站创建了一个自定义的产品卡"，并且我希望这些图像能够采用父级的整个宽度和高度，而与图像的尺寸无关.我试过max-width min-width max-height min-height，但似乎都没有用.我想不出任何其他解决方案.我要附上一张我想要的和我现在要实现的图像.

I've created a custom "product card" for my site, and I want the images to take the parent's full width and height, regardless of the image's dimensions. I have tried max-width min-width max-height min-height and none seem to work. I can't think of any other solution. I'm attaching an image of what I'd like and what I'm achieving now.

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

推荐答案

似乎您正在使一个简单的布局变得更加复杂. 在这种情况下，您不需要使用排名属性.这将使简单的布局更加复杂.

It seems you are making a simple layout more complex. You don't need to use position properties in this case. This will make simple layout more complex.

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

There are different scenarios how to use image more efficiently in webpages, like considering their height-width, and aspect ratio as well.

我创建了一个代码段，希望对您有用. 引导卡代码段

I have created a Snippet, hope so you will find it useful. Bootstrap Cards Snippet

对于动态产品卡片图像，请使用以下CSS属性:

For dynamic product card images use the following CSS properties:

.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>

这篇关于如何使图像占据DIV的完整尺寸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！