1
resposta

Imagem continua grande, apesar de classificar com col-md-4

Boa noite, pessoal. Estou com um problema na minha aplicação: As imagens dos jogos continuam ocupando quase a tela inteira, mesmo eu atribuindo uma classe a elas e chamando o app.css.

<figure class="thumb col-md-4">
          <img class="img-responsive" src="{{url_for('imagem', nome_arquivo='capa_generica.jpg')}}">
          <figcaption>
            <label class="fileContainer">
              Mudar Capa
              <input type="file" name="arquivo" accept=".jpg">
            </label>
          </figcaption>
        </figure>

A importação da configuração, no arquivo template.html, está assim:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Jogoteca </title>
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.css')}}">
    <link rel="stylesheet" href="{{ url_for('static', filename='app.css')}}">
  </head>
  <body>
[....]

Vocês tem ideia do que pode estar errado?

1 resposta

Oi Renan, tudo bom?

Uma boa abordagem pra descobrir o que está rolando no lado do front é inspecionar a imagem no seu navegador e verificar no chrome a aba styles ou relativo em outros navegadores.

Lá você consegue ver todos os estilos que estão sendo aplicados no elemento renderizado na tela. Verifica se seu estilo está realmente sendo aplicado.

Se não estiver, verifica se o arquivo está sendo importando na página corretamente (da uma olhada na aba console, muitas vezes da erro ao carregar e a gente não vê).

Caso esteja carregando corretamente, verifica se o comportamento não está sendo sobrescrito por nenhum outro.

Qualquer problema compartilha aqui com a gente =)

Abraço

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software