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

Question

[JohnDoe116]

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

<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");
}

Comments

[alex]

с детского сада ведь учат, не юзайте сокращенные свойства, если не умеете

Answer 1

[smilingcheater]

Свойство background перекрывает свойство background-size. Попробуйте вместо background указывать background-image.

Comments

[JohnDoe116]

спс, помогло.