Как сделать маску для картинок с закругленными углами?

Question

[istasiik]

Здравствуйте! Нарисовал в ai условные блоки с картинкой, которые выглядят вот так:

Сверстал:

В html:

<div class="block">
			<div><img alt="" src="img/background.png"></div>
			<div class="txt">
				<h3>Путешествие в лес</h3>
				<p>13 вещей, общая цена 12643 руб</p>
			</div>
		</div>
		
		<div class="block">
			<div><img alt="" src="img/background2.png"></div>
			<div class="txt">
				<h3>Для поездки</h3>
				<p>13 вещей, общая цена 12643 руб</p>
			</div>
		</div>

В CSS:

.block {
position: relative; 
width: 100%;
width:672px;
height:314px;
cursor:pointer;
margin:10px;
overflow: hidden;
}

.block img {
    position:absolute;
	height:314px;
	width:672px;
	border-radius: 9px;
	
}

Вопрос. Как сделать маску с закругленными углами в CSS, что бы пропорции картинки не менялись (как в моем варианте)?

P.S. Это пробовал, но на clip-path редактор вообще не реагирует, почему то.

clip-path: rectangle(x, y, width, height, [rx, ry]);

Answer 1

[Виталий Киренков]

.block {
	width: 672px;
	height: 314px;
	cursor: pointer;
	margin: 10px;
	overflow: hidden;
	border-radius: 9px;
}

.block img {
	display: block;
}

Comments

[istasiik]

Спасибо! Работает, с одним НО. Текст, который был сверху теперь под картинками. Вот стиль блока:

.block .txt {
position: absolute;
bottom: 53px;
left: 100px;
width: 100%;
}

Что можно сделать?

[Виталий Киренков]

.block .txt {
position: absolute;
bottom: 53px;
left: 100px;
width: 100%;
z-index: 5;
}

[istasiik]

@DeLaVega Как оказалось, не хватало position: relative; в .block . Спасибо!

[Виталий Киренков]

Ну, логично =) я его убрал из за того, что нет необходимости в абсолюте для картинки...

Answer 2

[Push Pull]

навскидку 10 px
border-radius: 10px;

Comments

[istasiik]

Нужно сделать маску перед этим 672x314. Картинка может быть любого размера. А border-radius там действительно 9px. Стоит в .block img

[Push Pull]

что то не обратил внимание сразу. вот только не пойму, вам маску надо на картинку вешать? тогда зачем она если уже закругленность есть?

[istasiik]

@deadbyelpy Мне нужно повесить маску, которая будет обрезать картинку без изменения пропорций и закруглять углы. Мое решение в коде сплющивает картинку, выглядит как то так

[Push Pull]

@istasiik что то вы все усложняете. border-radius не меняет размеры елемента. почему у вас меняеются размеры я не могу сказать пока не увижу верстку, а не ссылки на скрины разницы между которомы нету

[istasiik]

@deadbyelpy Спасибо за ответ! Верстку я привел в самой теме и расписал все довольно подробно. Чуть ниже уже решили проблему.