Anpassen und Bildgröße an ein Div anpassen (Bootstrap)

96

Ich versuche, ein Bild so zu gestalten, dass es in eine bestimmte Größe passt. Leider entspricht das Bild nicht dem Bild und schrumpft stattdessen proportional auf eine Größe, die nicht groß genug ist. Ich bin mir nicht sicher, was der beste Weg ist, um das Bild so zu gestalten, dass es hineinpasst.

Wenn dies nicht genug Code ist, würde ich gerne mehr liefern und bin offen für die Behebung anderer Fehler, die ich übersehen habe.

Hier ist der 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>

Mein 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
quelle
Ich habe hier eine Antwort auf eine ähnliche Frage gepostet: stackoverflow.com/questions/41870216/…
FredyWenger

Antworten:

56

Sie können das widthund heightvon Bildern explizit definieren , aber die Ergebnisse sehen möglicherweise nicht optimal aus.

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

jsFiddle

... pro Ihren Kommentar, können Sie auch blockieren irgendein overflow- sehen Sie dieses Beispiel ein Bild von der Höhe begrenzt , um zu sehen und abgeschnitten , weil es zu weit ist.

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

.top1 img {
    height:100%;
}
jterry
quelle
Ich habe mir das angeschaut, leider, wie Sie sagten, sind die Ergebnisse nicht die besten. Im Idealfall möchte ich, dass die Bilder verkleinert werden, damit die Höhe des Bildes der Höhe des Divs entspricht und die Breite des Bildes, die die Breite des einschränkenden Div überschreitet, ausgeblendet wird. Wenn das
Sinn
Ja das suche ich! Ich danke dir sehr!
smilefreak24
Die ANDERE Antwort ist die beste, einfach das Hinzufügen von class = "img-responsive" zum img-Tag macht den Trick!
iMobaio
1
besser von width:100%;ist max-width:100%;und besser alles ist Klasse img-responsivein BS3 oder img-fluidin BS4.
Nabi KAZ
167

Versuchen Sie Folgendes: 

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

AKTUALISIEREN:

In Bootstrap 4 img-responsivewird img-fluid, so lautet die Lösung mit Bootstrap 4:

<div class="container">
    <div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>
Shafeeque S.
quelle
5
Cool! class = "img-responsive" hat geholfen. Vielleicht sollte dies heute die akzeptierte Antwort sein.
Anupam
1
class = "img-responsive" ist definitiv der richtige Weg! Dies sollte die akzeptierte Antwort sein.
iMobaio
28
es ist img-fluidjetzt nichtimg-responsive
Worte für den
32

Fügen Sie einfach die Klasse img-responsivezu Ihrem imgTag hinzu, sie gilt ab Bootstrap 3!

Shashi
quelle
Entschuldigung, aber können Sie bitte genau sein, ich bekomme Ihre Frage nicht richtig, danke!
Shashi
7

Ich hatte das gleiche Problem und stieß auf die folgende einfache Lösung. Fügen Sie dem Bild einfach ein wenig Polsterung hinzu, und die Größe ändert sich so, dass sie in das div passt.

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>
wiltonio
quelle
1
Gelöst mit Bootstrap anstelle von benutzerdefiniertem CSS. Danke dir.
Mattgrün
7

Ich habe das benutzt und arbeite für mich.

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>
alanHdez
quelle
4

Wenn jemand von euch nach Bootstrap-4 sucht . Hier ist es

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>
Dexter
quelle
Dies ist nicht die ideale Lösung, wenn Sie eine andere Spalte mit Text haben, da es auch hart gegen den Rand der Grenze sein wird
James Burke
2

In den meisten Fällen verwendet das Bootstrap-Projekt jQuery, sodass Sie jQuery verwenden können.

Nehmen Sie einfach die Breite und Höhe des Elternteils mit JQuery.offsetHeight()und JQuery.offsetWidth()und stellte sie auf das Kind - Element mit JQuery.width()und JQuery.height().

Wenn Sie darauf reagieren möchten, wiederholen Sie auch die obigen Schritte in $(window).resize(func).

Mohsen
quelle