Ajuste e tamanho da imagem para caber em um div (bootstrap)

97

Estou tentando fazer com que uma imagem se ajuste a um div de tamanho específico. Infelizmente, a imagem não está de acordo com isso e, em vez disso, está diminuindo proporcionalmente para um tamanho que não é grande o suficiente. Não tenho certeza de qual é a melhor maneira de fazer a imagem caber dentro dela.

Se isso não for código suficiente, ficarei feliz em fornecer mais e estou aberto para corrigir quaisquer outros erros que esteja negligenciando.

Aqui está o 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>

Meu 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
fonte
Eu postei uma resposta para uma pergunta semelhante aqui: stackoverflow.com/questions/41870216/…
FredyWenger

Respostas:

57

Você pode definir explicitamente o widthe heightdas imagens, mas os resultados podem não ser os mais bonitos.

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

jsFiddle

... de acordo com o seu comentário, você também pode bloquear qualquer um overflow- veja este exemplo para ver uma imagem restrita pela altura e cortada porque é muito larga.

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

.top1 img {
    height:100%;
}
jterry
fonte
Eu tentei fazer isso, infelizmente, como você disse, os resultados não são os melhores. Idealmente, gostaria que as imagens fossem reduzidas para que a altura da imagem se ajustasse à altura do div, e a largura da imagem que excede a largura do div de restrição fosse ocultada. Se isso faz sentido
smilefreak24
Sim, é isso que estou procurando! Muito obrigado!
smilefreak24
A OUTRA resposta é a melhor, simplesmente adicionar class = "img-responsive" à tag img resolve!
iMobaio
1
melhor width:100%;é max-width:100%;e melhor todos eles são classes img-responsiveno BS3 ou img-fluidno BS4.
Nabi KAZ
167

Tente desta forma: 

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

ATUALIZAR:

No Bootstrap 4 img-responsivetorna-se img-fluid, portanto, a solução usando o Bootstrap 4 é:

<div class="container">
    <div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>
Shafeeque S
fonte
5
Legal! class = "img-responsive" ajudou. Talvez esta deva ser a resposta aceita hoje.
Anupam de
1
class = "img-responsive" é definitivamente o caminho a seguir! Esta deve ser a resposta aceita.
iMobaio
28
é img-fluidagora, nãoimg-responsive
palavras para o contrário
32

Simplesmente adicione a classe img-responsiveà sua imgtag, ela é aplicável no bootstrap 3 em diante!

Shashi
fonte
Desculpe, mas você pode ser específico, não estou recebendo sua pergunta corretamente, obrigado!
Shashi
7

Eu tive o mesmo problema e tropecei na seguinte solução simples. Basta adicionar um pouco de preenchimento à imagem e ela se redimensiona para caber no div.

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>
wiltonio
fonte
1
Resolvido COM Bootstrap em vez de CSS personalizado. Obrigado.
mattgreen
7

Eu usei isso e funciona para mim.

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

Se algum de vocês estiver procurando pelo Bootstrap-4 . Aqui está

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>
Dexter
fonte
esta não é a solução ideal se você tiver outra coluna com texto, pois ela também ficará difícil contra a borda da fronteira
James Burke
2

Na maioria das vezes, o projeto de bootstrap usa jQuery, então você pode usar jQuery.

Basta obter a largura e a altura do pai com JQuery.offsetHeight()e JQuery.offsetWidth(), e configurá-los para o elemento filho com JQuery.width()e JQuery.height().

Se você quiser torná-lo responsivo, repita as etapas acima $(window).resize(func)também.

Mohsen
fonte