Как вставить картинку в рамку?

Question

Начал недавно использовать bootstrap для вёрстки сайта, и захотел сделать рамки с картинками, через готовые шаблоны бутстрапа.

<svg class="bd-placeholder-img card-img-top"  width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
   <rect width="100%" height="100%" fill="#55595c"></rect>
   <text x="50%" y="50%" fill="#eceeef" dy=".3em">Name?</text>
</svg>

На шаблоне выглядит так

Как вместо этого серого фона с названием вставить свою картинку?

Answer 1

В теге rect передаётся фон, если он не нужен - убирайте. В теге text передаётся текст, если он не нужен - убирайте. Чтобы разместить изображение, необходимо в тег image передавать ссылку на изображение.

<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
  <title>Placeholder</title>
  <rect width="100%" height="100%" fill="#55595c"></rect>
  <image x="0" y="0" width="100%" xlink:href="//i.ibb.co/zsRf7zR/vivid-blurred-colorful-background.jpg" />
  <text x="50%" y="50%" fill="#eceeef" dy=".3em">Name?</text>
</svg>

БЛОГ НА HUSL

Как вставить картинку в рамку?

Ответы (1 шт):