Afbeelding aanpassen en aanpassen aan een div (bootstrap)

Ik probeer een afbeelding zo te krijgen dat deze binnen een div van een specifiek formaat past. Helaas voldoet de afbeelding er niet aan en wordt in plaats daarvan proportioneel kleiner tot een formaat dat niet groot genoeg is. Ik weet niet zeker wat de beste manier is om de afbeelding erin te laten passen.

Als dit niet genoeg code is, zou ik graag meer code willen leveren, en ik sta open voor het oplossen van eventuele andere fouten die ik over het hoofd zie.

Hier is de 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>

Mijn 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;
}

Antwoord 1, autoriteit 100%

Probeer het op deze manier:

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

UPDATE:

In Bootstrap 4 wordt img-responsiveimg-fluid, dus de oplossing met Bootstrap 4 is:

<div class="container">
    <div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>

Antwoord 2, autoriteit 31%

Je kunt de widthen heightvan afbeeldingen expliciet definiëren, maar de resultaten zijn misschien niet de mooiste.

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

jsFiddle

…volgens uw opmerking kunt u ook gewoon elke overflowblokkeren – zie dit voorbeeldom een ​​afbeelding te zien die beperkt is door de hoogte en wordt afgesneden omdat deze te breed is.

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

Antwoord 3, autoriteit 29%

Alleen een waarschuwing dat Bootstrap 4 nu img-fluidin plaats van img-responsive, dus controleer goed welke versie je gebruikt als je problemen hebt.

Antwoord 4, autoriteit 17%

Voeg gewoon de klasse img-responsivetoe aan uw img-tag, deze is van toepassing in bootstrap 3 en later!

Antwoord 5, autoriteit 4%

Ik heb dit gebruikt en werkt voor mij.

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

Antwoord 6, autoriteit 4%

Ik had hetzelfde probleem en stuitte op de volgende eenvoudige oplossing. Voeg gewoon een beetje opvulling toe aan de afbeelding en het formaat wordt automatisch aangepast zodat het binnen de div past.

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

Antwoord 7, autoriteit 3%

Als iemand van jullie op zoek is naar Bootstrap-4. Hier is het

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>

Antwoord 8

Meestal gebruikt het bootstrap-project jQuery, dus u kunt jQuery gebruiken.

Verkrijg gewoon de breedte en hoogte van de ouder met JQuery.offsetHeight()en JQuery.offsetWidth(), en stel ze in op het onderliggende element met JQuery.width()en JQuery.height().

Als u het responsive wilt maken, herhaalt u de bovenstaande stappen ook in de $(window).resize(func).