Dopasowywanie i rozmiar obrazu w celu dopasowania do div (bootstrap)

100

Próbuję uzyskać obraz pasujący do elementu div o określonym rozmiarze. Niestety obraz nie jest z nim zgodny i zamiast tego proporcjonalnie zmniejsza się 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 to nie wystarczy, z przyjemnością dostarczę więcej i jestem otwarty na naprawienie innych błędów, które przeoczę.

Oto kod 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>

Mój 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;


}
html css twitter-bootstrap smilefreak24
źródło
Wysłałem

Odpowiedzi:

58

Możesz wyraźnie zdefiniować widthi heightobrazów, ale wyniki mogą nie być najlepiej wyglądające.

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

jsFiddle

... zgodnie z komentarzem możesz też po prostu zablokować dowolny overflow- zobacz ten przykład, aby zobaczyć obraz ograniczony wysokością i obcięty, ponieważ jest zbyt szeroki.

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

.top1 img {
    height:100%;
}
jterry
źródło
Chciałem to zrobić, niestety, jak powiedziałeś, wyniki nie są najlepsze. Najlepiej byłoby, gdyby obrazy zostały zmniejszone, tak aby wysokość obrazu odpowiadała wysokości elementu div, a szerokość obrazu, która przekracza szerokość elementu div ograniczającego, byłaby ukryta. Jeśli to ma
sens
Tak, tego właśnie szukam! Dziękuję bardzo!
smilefreak24
INNA odpowiedź jest najlepsza, po prostu dodanie class = "img-responsive" do tagu img załatwia sprawę!
iMobaio,
1
lepiej od width:100%;jest max-width:100%;i lepiej wszystkie są w klasie img-responsiveBS3 lub img-fluidBS4.
Nabi KAZ
173

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>

AKTUALIZACJA:

W Bootstrap 4 img-responsivestaje się img-fluid, więc rozwiązaniem wykorzystującym Bootstrap 4 jest:

<div class="container">
    <div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>
Shafeeque S
źródło
5
Fajne! class = "img-responsive" pomogło. Być może dzisiaj powinna to być akceptowana odpowiedź.
Anupam
1
class = "img-responsive" to zdecydowanie najlepsza droga! To powinna być akceptowana odpowiedź.
iMobaio,
29
to jest img-fluidteraz, nieimg-responsive
porządku
32

Po prostu dodaj klasę img-responsivedo swojego imgtagu, będzie ona stosowana w bootstrap 3 i nowszych!

Shashi
źródło
Przepraszamy, ale czy możesz być konkretny, nie otrzymuję poprawnie Twojego pytania, dziękuję!
Shashi,
7

Miałem ten sam problem i natknąłem się na następujące proste rozwiązanie. Po prostu dodaj trochę dopełnienia do obrazu, a jego rozmiar zostanie dopasowany do elementu div.

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>
wiltonio
źródło
1
Rozwiązany za pomocą Bootstrap zamiast niestandardowego CSS. Dziękuję Ci.
mattgreen
7

Użyłem tego i działa dla mnie.

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>
alanHdez
źródło
4

Jeśli ktoś z was szuka Bootstrap-4 . Tutaj jest

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>
Dexter
źródło
nie jest to idealne rozwiązanie, jeśli masz kolejną kolumnę z tekstem, ponieważ również będzie ciężko o krawędź granicy
James Burke
2

Przez większość czasu projekt bootstrap używa jQuery, więc możesz użyć jQuery.

Po prostu uzyskaj szerokość i wysokość rodzica za pomocą JQuery.offsetHeight()i JQuery.offsetWidth()i ustaw je na element podrzędny za pomocą JQuery.width()iJQuery.height() .

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

Mohsen
źródło