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

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

50

Apenas um aviso de que o Bootstrap 4 agora usa em img-fluidvez deimg-responsive , então verifique qual versão você está usando se estiver tendo problemas.

— Alex
fonte

3

img-fluidfaz isso! Obrigado !

— pyano,

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