How can I make the image take the full size of the DIV?

Paula

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

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

this is what i need don't want these spaces don't want these spaces

Aksai Bavani

It looks like you are making a simple layout more complicated. In this case, you don't need to use the location attribute . This will make a simple layout more complicated.

How to use images more effectively in web pages in different situations, for example also consider their height, width and aspect ratio.

I created a code snippet that I hope will be useful to you. Boot Card Fragment

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>

Related

How can I make the image take the full size of the DIV?

Paula I've created a custom "product card" for my website, and I want the images to take the full width and height of the parent regardless of the dimensions of the images. I've tried it max-width min-width max-height min-height, but none seem to work. I can't

How to make a div take full width?

user2486738： I have a header div and a content div. The content div is wider than the window, so the horizontal scrollbar appears. I want the header div to take up the full width, which means it should stretch to the same width as the content div below it. By

How can i make the div take the height of the whole body

fighter I have a menu that I'm trying to wrap inside a yellow div, and I want this div (yellow) to take up the full height of the green square, no matter how big the green square's content is, e.g. the orange square increases, the yellow div should also increa

How can I make the div take up the whole body?

Andrew Kilburn I have a notification panel that I want to take up the entire body without specifying hardcoded values such as height: 100px;. I need it to take all the space until it reaches the footer. ViewHeight doesn't work properly because it pushes the fo

How can i make the div take the height of the whole body

fighter I have a menu, I am trying to wrap it inside a yellow div, and I want this div (yellow) to take up the full height of the green square, no matter how big the content of the green square is, e.g. the orange square increases, the yellow div should also i

How can I make a div fit the full width?

Zubair I want to make a div of class ".shadow" fit the full width. But I can't figure it out. The code I am using is below. .main .container{ margin: auto; display: table; } .main .main-inner{ display: table-cell; vertical-align: middle; h

How can I make a div fit the full width?

Zubair I want to make a div of class ".shadow" fit the full width. But I can't figure it out. The code I am using is below. .main .container{ margin: auto; display: table; } .main .main-inner{ display: table-cell; vertical-align: middle; h

How can I make a div scrollable only when the content is full?

FangXIII I'm making a group type of page content and I have a div on one side of my web page that gets its members from the database, so when 5 members are displayed I want no scroll bar on one side, but if the box fills say 15 member, I want the scrollbar to

How can I make a div fit the full width?

Zubair I want to make a div of class ".shadow" fit the full width. But I can't figure it out. The code I am using is below. .main .container{ margin: auto; display: table; } .main .main-inner{ display: table-cell; vertical-align: middle; h

How can I make a div fit the full width?

Zubair I want to make a div of class ".shadow" fit the full width. But I can't figure it out. The code I am using is below. .main .container{ margin: auto; display: table; } .main .main-inner{ display: table-cell; vertical-align: middle; h

How can I make a div fit the full width?

Zubair I want to make a div of class ".shadow" fit the full width. But I can't figure it out. The code I am using is below. .main .container{ margin: auto; display: table; } .main .main-inner{ display: table-cell; vertical-align: middle; h