Как сделать так, чтобы изображение получило полный размер 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

Кажется, вы делаете простой макет более сложным. Вам не нужно использовать свойства позиции в этом случае. Это сделает простой макет более сложным.

Существуют различные сценарии более эффективного использования изображения на веб-страницах, например, с учетом их высоты, ширины и соотношения сторон.

Я создал фрагмент, надеюсь, вы найдете его полезным. Фрагмент карты начальной загрузки

Для динамических изображений карточек продукта используйте следующие свойства 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>

Answer 3

Используйте div с фоновым изображением. Установите его высоту 100%, положение фона в центре и размер фона для покрытия.

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

Работает в загрузочных картах, я раздвоил твою ручку. https://codepen.io/Jason_B/pen/RmdoaQ