Dopasowywanie i rozmiar obrazu, aby dopasować element div (ładowanie początkowe)

Question

Próbuję uzyskać obraz pasujący do określonego rozmiaru div. Niestety obraz nie jest zgodny z tym, a zamiast tego proporcjonalnie maleje do rozmiaru, który nie jest wystarczająco duży. Nie jestem pewien, jaki jest najlepszy sposób, aby dopasować obraz do jego wnętrza.

Jeśli ten kod jest niewystarczający, chętnie dostarczę więcej i jestem otwarty na naprawianie wszelkich innych błędów, które przeoczam.

Oto HTML

<div class="span3 top1"> 
     <div class="row"> 
      <div class="span3 food1"> 
       <img src="images/food1.jpg" alt=""> 
      </div> 
     </div> 
      <div class="row"> 
       <div class="span3 name1"> 
        heres the name 
      </div> 
      </div> 
      <div class="row"> 
       <div class="span3 description1"> 
        heres where i describe and say "read more" 
      </div> 
      </div> 


     </div> 

Moje CSS

.top1{ 

    height:390px; 
    background-color:#FFFFFF; 
    margin-top:10px; 


} 

.food1{ 

background-color:#000000; 
height:230px; 


} 

.name1{ 

background-color:#555555; 
height:90px; 

} 

.description1{ 

background-color:#777777; 
height:70px; 


} 

Answer 1

można jednoznacznie określić width i height obrazów, ale wyniki mogą nie być najlepszym patrzy.

.food1 img { 
    width:100%; 
    height: 230px; 
} 

jsFiddle

---

... za Twój komentarz, można też po prostu blokować każdy overflow - patrz this example aby zobaczyć obraz o ograniczonej wysokości i odcięty, ponieważ jest zbyt szeroki.

.top1 { 
    height:390px; 
    background-color:#FFFFFF; 
    margin-top:10px; 
    overflow: hidden; 
} 

.top1 img { 
    height:100%; 
} 

Answer 2

Spróbuj w ten sposób:

<div class="container"><div class="col-md-4" style="padding-left: 0px; padding-right: 0px;"> 
     <img src="images/food1.jpg" class="img-responsive"> 
    </div> 
</div> 

Answer 3

miałem ten sam problem i natknęliśmy się na następującym prostym rozwiązaniem. Po prostu dodaj trochę dopełnienia do obrazu i zmienia rozmiar, dopasowując się do elementu div.

<div class="col-sm-3"> 
    <img src="xxx.png" class="img-responsive" style="padding-top: 5px"> 
</div> 

Answer 4

Wystarczy dodać klasę img-responsive do tagu img, ma ona zastosowanie w bootstrap 3 dalszą!

powodzenia :)

Answer 5

Większość czasu, bootstrap projekt wykorzystuje jQuery, dzięki czemu można używać jQuery.

Wystarczy uzyskać szerokość i wysokość rodzica z JQuery.offsetHeight() i JQuery.offsetWidth() i ustawić je do elementu podrzędnego z JQuery.width() i JQuery.height().

Jeśli chcesz, aby był elastyczny, powtórz powyższe kroki również w $(window).resize(func).

Answer 6

Tylko jedna osoba w górę, że Bootstrap 4 now uses img-fluid instead of img-responsive, więc sprawdź dokładnie, której wersji używasz, jeśli masz problemy.