Клип-путь занимает место для всего изображения?

Question

Я пытаюсь показать только часть изображения, но это занимает высоту внутри моей рамки для всего изображения, когда я хочу взять высоту только для той части, которую я показываю.

В приведенном ниже примере кода обратите внимание на светло-синий фон, отображаемый за изображением.
Как я могу предотвратить это?

span {
  float: left;
  background-color: lightblue;
}
img {
  clip-path: polygon(0 0, 100% 0, 100% 64%, 0 64%);
}

<span>
  <img src="//via.placeholder.com/350x150">
</span>

Answer 1

Применить clip-path вместо этого, но имейте в виду, что clip-path не удаляет невидимую часть

span {
  float: left;
  background-color: lightblue;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 0 64%);
}
p {
 clear:both;
}

<span>
  <img src="//via.placeholder.com/350x150">
</span>
<p>some text here</p>

Вы можете избежать clip-path используя фиксированную высоту на пролете и настройку overflow:hidden и в этом случае вы удалите ненужную часть:

span {
  float: left;
  background-color: lightblue;
  height:100px;
  overflow:hidden;
}
p {
  clear:both;
}

<span>
  <img src="//via.placeholder.com/350x150">
</span>
<p>some text here</p>

Еще одна идея - использовать изображение в качестве фона:

span {
  float: left;
  background-color: lightblue;
  height:100px;
  width:350px;
}
p {
  clear:both;
}

<span style="background-image:url(//via.placeholder.com/350x150)">
</span>
<p>some text here</p>