john Postado Maio 29, 2022 Compartilhar Postado Maio 29, 2022 Tudo de bom para os senhores. Me chamo John, sou iniciante. Estou enfrentando o seguinte erro: Ao abrir a linguagem de texto html no navegar a img 2 sobrepõem as outras imagens não sendo responsiva igual as outras demais imgs. Isso ocorre ao dar Zoom na tela, somente a img card 2 acontece isso. poderiam dar uma olhada no html8 abaixo por favor.Gratidão . <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-escale=1"> <title>Bootstrap5 CDN</title> <!--CSS--> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> <!--stylesheet é uma declaração tipo em cascata--> </head> <body> <div class="container-fluid"> <h1>Jumbotron & Cards</h1> </div> <div class="jumbotron Jumbotron"> <div class="container-fluid"> <hi class="display-4">Olá mundo!</hi> <p class="lead">Este é meu primeiro jumbotron</p> <a href="#" class="btn btn-primary">Saiba mais</a> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-3"> <div class="card border border-primary bg-warning"> <div class="card-body "> <img src="C:/Users/JOHNA/OneDrive/Área de Trabalho/Bootstrap/Bootstrap 5.1.3/Projetos/imagens/img/natureza1.jpg " class="card-img-top"> <h5 class="card-title ">Meu card 1</h5> <p class="card-text ">Olá, meu primeiro card</p> <p href="# " class="btn btn-primary ">Saiba mais</p> </div> </div> </div> <div class="col-3"> <div class="card border border-warning"> <div class="card-body "> <img src="C:/Users/JOHNA/OneDrive/Área de Trabalho/Bootstrap/Bootstrap 5.1.3/Projetos/imagens/img/natureza1.jpg" class="card rounded-circle"> <h5 class="card-title ">Meu card 2</h5> <p class="card-text ">Olá, meu primeiro card</p> <p href="# " class="btn btn-primary ">Saiba mais</p> </div> </div> </div> <div class="col-3 "> <div class="card border border-seccess "> <div class="card-body "> <img src="C:/Users/JOHNA/OneDrive/Área de Trabalho/Bootstrap/Bootstrap 5.1.3/Projetos/imagens/img/natureza1.jpg" class="card-img-top "> <h5 class="card-title ">Meu card 3</h5> <p class="card-text ">Olá, meu primeiro card</p> <p href="# " class="btn btn-primary ">Saiba mais</p> </div> </div> </div> <div class="col-3 "> <div class="card border border-danger "> <div class="card-body "> <img src="C:/Users/JOHNA/OneDrive/Área de Trabalho/Bootstrap/Bootstrap 5.1.3/Projetos/imagens/img/natureza1.jpg" class="card-img-top "> <h5 class="card-title ">Meu card 4</h5> <p class="card-text ">Olá, meu primeiro card</p> <p href="# " class="btn btn-primary ">Saiba mais</p> </div> </div> </div> </div> </div> <div class="row"> <div class="col-12"> <p class="display-4">Trabalhando com texto</p> <p></p> <p>Meu texto</p> <h2 class="text-left">Meu texto</h2> <h2 class="text-center">Meu texto</h2> <h2 class="text-right">Meu texto</h2> <br> <h2 class="text-primary">Meu texto</h2> <h2 class="text-secondary">Meu texto</h2> <h2 class="text-warning">Meu texto</h2> <h2 class="text-success">Meu texto</h2> <h2 class="text-danger">Meu texto</h2> <h2 class="text-info">Meu texto</h2> <h2 class="text-dark">Meu texto</h2> <h2 class="text-light">Meu texto</h2> </div> </div> </div> <footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script><!--src é o source a fonte--> </footer> </body> </html> Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Administradores MarceloPizani Postado Maio 30, 2022 Administradores Compartilhar Postado Maio 30, 2022 Olá! Você disse que o problema só acontece com a imagem que está em "Meu card 2"... eu reparei que essa é a única imagem que você define class="card rounded-circle", nas outras você usa class="card-img-top". Será que mudar o class dessa imagem para ficar igual as outras resolve esse problema? Link to comment Compartilhe em outros sites Outras opções de compartilhamento...
Postagens Recomendadas
Crie uma conta ou entre para comentar 😀
Você precisa ser um membro para deixar um comentário.
Crie a sua conta
Participe da nossa comunidade, crie sua conta.
Criar minha conta agoraÉ bem rápido!
Entrar
Você já tem uma conta?
Entrar agoraFaça o login agora.