@JohnDoe116

Почему не работает background-size: contain вместе с grid?

Нужно чтобы фотографии в сетке grid вмещались в каждый элемент а не обрезались. Скорее всего я что-то упускаю.
5d0a0356e6dd2676677145.jpeg
5d0a036118d87044912340.jpeg

<div class="portfolio-middle gallery">
					<div class="portfolio-item item-1"></div>
					<div class="portfolio-item item-2"></div>
					<div class="portfolio-item item-3"></div>
					<div class="portfolio-item item-4"></div>
					<div class="portfolio-item item-5"></div>
					<div class="portfolio-item item-6"></div>
				</div>


.portfolio-middle {
	display: grid;
	width: 100%;
	height: 405px; 
	grid-template-areas: 
	"a a b c"
	"d e f f";
	grid-template-rows: 200px 1fr;
	grid-gap: 12px;
}
/* background-size: contain; не работает  */
.portfolio-middle .portfolio-item{ 
	background-repeat: no-repeat;
	-webkit-background-size: contain; 
	background-size: contain;
}

.portfolio-middle .item-1 {
	grid-area: a;
	background: url("../../img/portphoto-1.jpg");
}

.portfolio-middle .item-2 {
	grid-area: b;
	background: url("../../img/portphoto-2.jpg");
}
.portfolio-middle .item-3 {
	grid-area: c;
	background: url("../../img/portphoto-3.jpg");
}

.portfolio-middle .item-4 {
	grid-area: d;
	background: url("../../img/portphoto-4.jpg");
}

.portfolio-middle .item-5 {
	grid-area: e;
	background: url("../../img/portphoto-5.jpg");
}

.portfolio-middle .item-6 {
	grid-area: f;
	background: url("../../img/portphoto-6.jpg");
}
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
smilingcheater
@smilingcheater
Свойство background перекрывает свойство background-size. Попробуйте вместо background указывать background-image.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы