SVG Yerine İmg Kullanmak?

coder 94 gün önce

279 defa görüntülendi

Merhaba arkadaşlar.
Bootstrap'in aşağıdaki blog örneğindeki Thumbnail yazan yerde resim olsun istiyorum.
Ancak ne kadar uğraştıysam resim koyamadım. İstediğim gibi olmuyor. Thumbnail yazan kısımda svg kullanılmış.
Ben kullanmayı bilmiyorum.

Dediğim işlemi nasıl yapabiliriz?

<div class="col-md-6">
  <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
	<div class="col p-4 d-flex flex-column position-static">
	  <strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
	  <h3 class="mb-0">Featured post</h3>
	  <div class="mb-1 text-body-secondary">Nov 12</div>
	  <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
	  <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
		Continue reading
		<svg class="bi"><use xlink:href="#chevron-right"></use></svg>
	  </a>
	</div>
	<div class="col-auto d-none d-lg-block">
	  <svg class="bd-placeholder-img" width="200" height="250" 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">Thumbnail</text></svg>
	</div>
  </div>
</div>

Bootstrap Blog Örneği

Codepen

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (5)

emmir2

93 gün önce

böyle dener misin


<div class="container py-5">
  
  <div class="col-md-6">
  <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
	<div class="col-md-8 p-4 d-flex flex-column position-static">
	  <strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
	  <h3 class="mb-0">Featured post</h3>
	  <div class="mb-1 text-body-secondary">Nov 12</div>
	  <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
	  <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
		Continue reading
		<svg class="bi"><use xlink:href="#chevron-right"></use></svg>
	  </a>
	</div>
	<div class="col-md-4">
	  	  <img class="bd-placeholder-img" src=".....">
	</div>
  </div>
</div>
</div>

#013127

ugur011

15 gün önce

aga cok iyi de bazi svg ler kodda coooooook buyuk yer kapliyo bazen img daha mantikli

#013282

gokcin

90 gün önce

Resmin Classına veri eklemen gerekli o yüzden. kod çalışır halde. test ettim.

#013141

coder

94 gün önce

@gokcin büyük bir resim koymak istediğimde tam olarak oturtamıyorum. Resim büyük geliyor.

#013123

gokcin

94 gün önce


<div class="container py-5">
  
  <div class="col-md-6">
  <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
	<div class="col-md-8 p-4 d-flex flex-column position-static">
	  <strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
	  <h3 class="mb-0">Featured post</h3>
	  <div class="mb-1 text-body-secondary">Nov 12</div>
	  <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
	  <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
		Continue reading
		<svg class="bi"><use xlink:href="#chevron-right"></use></svg>
	  </a>
	</div>
	<div class="col-md-4">
	  	  <img src=".....">
	</div>
  </div>
</div>
</div>

#013121