2

Olá,

Eu estou iniciando meu aprendizado com dimensões e escalas no Bootstrap. Comecei fazendo um container ocupar toda a tela, e distribui 3 divs para ocupar o container independente de seu conteúdo. A div top ocupa 10%, a div do meio ocupa 80%, e a div bottom ocupa 10%; completando 100%.

Decidi colocar uma <img> na div do meio, e me veio o seguinte problema: dependendo do tamanho da imagem, ela ultrapassa os limites da div.

Tentei usar max-width inherit e outras propriedades para fazer com que, caso a imagem seja maior que a div, ela não irá ultrapassar esse limite, mas não obtive sucesso. Gostaria de uma ajuda quanto a isso.

HEAD:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<style type="text/css">

html {
  height: 100%;
}

body, .container-fluid {
  height: 100%;
}

</style>


<title>Dimensões e Escalas</title>


BODY:

<body>

<div class="container-fluid">
 <div class="row" style="border: 5px solid red; height: 10%;">
   <div class="col-12 h-50">Teste 10%</div>
 </div>

 <div class="row" style="border: 5px solid black; height: 80%">
  <div class="col-12">
    <img id="fotoExpandida" class="img-fluid rounded" src="http://ap.imagensbrasil.org/images/imagens-lobos.jpg" style="max-width: inherit; max-height: inherit;">
  </div>

 </div>

 <div class="row" style="border: 5px solid blue; height: 10%;">
   <div class="col-12">Teste 10%</div>
 </div>

</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

2
  • Ola tony, tenta utilizar o max-width:100% ao invés de inherit. seu codigo - jsfiddle Commented 18/01/2019 às 18:37
  • Já tentei amigo. O resultado é o mesmo, a imagem fica no seu tamanho máximo. Porem, se eu definir para 90%, 80%, etc; a imagem vai diminuindo de tamanho. Mas se eu atribuir porcentagem, dependendo do tamanho da tela, ela vai ultrapassar o limite da div. Por isso que nescessito de alguma forma deixar a imagem responsiva, mas não permitir que ela ultrapassa o limite do seu parente (div). Commented 18/01/2019 às 18:52

1 Resposta 1

3

Cara na verdade seu "grid" está com uns probleminhas. Como vc quer 3 linhas o correto seria 1 row com 3 col-12, sendo que a primeira e última com com 10% de altura e a col do meio com 80%. Então eu montei o grid assim e fiz as classes no style.

Depois vc precisa ajustar a imagem, ela deve ter 100% de largura e altura. E a propriedade object-fit: cover vai fazer com que a imagem sempre ocupe todo o espaço disponível, centralizada e sem deformar (ficando achatada na horizontal/vertical)...

inserir a descrição da imagem aqui

Veja o código referente a imagem acima:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.n1 {
    height: 10%;
}
.n2 {
    height: 80%;
}
[class^="col-"] {
    border: 1px solid red;
}
img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
 
<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col-12 n1">1</div>
        <div class="col-12 n2">
            <img id="fotoExpandida" class="" src="http://ap.imagensbrasil.org/images/imagens-lobos.jpg">
        </div>
        <div class="col-12 n1">3</div>
    </div>
</div>


DICA

Se vc quiser que a imagem fique sempre inteiramente dentro elemento vc pode trocar object-fit: cover; por object-fit: contain;, dessa forma a imagem sempre aparece na sua totalidade, mas vai ficar espaço em branco na tela... Aqui tem mais detalhes: Reduzir o tamanho de uma imagem e manter a proporção com CSS

5
  • É isso mesmo. Eu realmente pensei em utilizar 3 col-12, mas achei que seria mais "certo" utilizar 3 row. Obrigado por esse aprendizado !! Commented 18/01/2019 às 19:21
  • @TonyStarkus errado não estária, mas 3 col12 funciona melhor nesse caso, pois eh um pai com três filhos, e não 3 irmãos com 1 filho cada um . E dentro da com col vc pode por outra row ;)
    – hugocsl
    Commented 18/01/2019 às 19:40
  • Só mais uma dúvida. Com o "object-fit: cover;", uma imagem pequena é expandida, perdendo a qualidade. Para meus testes, o "object-fit: contain;" funciona melhor para qualquer tamanho de imagem, junto com o código que está no link que você enviou (defini max-width e max height em 100%, e deixei o width e height em auto). Porém com essa configuração, a imagem não fica mais centralizada verticalmente e horizontalmente. Alguma dica ? Utilizei esse imagem como teste: encrypted-tbn0.gstatic.com/… Commented 18/01/2019 às 19:52
  • @TonyStarkus sim na col que a imagem está dentro vc pode usar as classes flex do Bootstrap 4 para fazer o alinhaento getbootstrap.com/docs/4.1/utilities/flex nessa col da imagem coloque as classes d-flex justify-content-center align-items-center teste e me fala
    – hugocsl
    Commented 18/01/2019 às 20:59
  • 1
    Ainda tenho muito que ler nesses documentos do Bootstrap. Obrigado mais uma vez !! Commented 18/01/2019 às 21:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .