Bootstrap Resim Sorunu

Anonim 988 gün önce

510 defa görüntülendi

Boostrap ile bir tasarım yaptım.

Ama paylaştığım resimdeki gibi bir sorunum var. Dikey olarak eklediğim resimlerde boyut olarak hizalamada sorun çıkıyor. Height değerlerini aynı yaptığım zamanda görüntü doğal olarak bozuluyor. Bunu nasıl çözebilirim.

örn; https://i.hizliresim.com/mca51qa.jpg
Kullanım Şeklim:

<div class="py-5">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="main">
					<div class="zoom-gallery">
						<div class="slider slider-for center">
							<div>
								<a href="https://i.hizliresim.com/mca51qa.jpg">
									<img class="d-block w-100" src="https://i.hizliresim.com/mca51qa.jpg">
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

html

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)

codepacks

986 gün önce

en kolayı bootstrap'ta classa sizing değeri atamak
örnek
h-25 d-inline-block h ibaresi yukardan aşağıya temsil eder yüzde 25% boyutlandırılır
örnek
w-25 d-inline-block w ibaresi sağdan sola temsil eder yüzde 25% boyutlandırılır
ayrıca boşluk atamak içinde yine classa
mt-0
mb-0
ml-0
mr-0
my-0

t- değer margin-top veya padding-top
b- değer margin-bottom veya padding-bottom
l- değer margin-left veya padding-left
r- değer margin-right veya padding-right
x- her ikisini de ayar -left ve -right
y- her ikisini de ayar -top ve -bottom

#009538

aspava

987 gün önce

resimlerinize yine width, height değerlerini vererek object-fit seçeneği ile düzenlemeler yapabilirsiniz.

object-fit: cover , object-fit: fill, v.s hangisi işinize yarıyorsa artık

#009529

d0nz

988 gün önce

Carousel kullanmıyorum ne yazık ki.

#009524

webdoc

988 gün önce

hocam yada buna göz atın

#009523

webdoc

988 gün önce

eğer carousel yapıyor isen bu düzeni kullan

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

daha fazla bilgi için göz atın hocam

#009522