Jump to content

Me ajudem sou iniciante, ao dar zoom (navegador) a img sobrepõem as demais imagens .

john

Por john
em HTML & CSS

 Compartilhar

Postagens Recomendadas

john

john

Postado
Postado

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
  • Administradores
MarceloPizani

MarceloPizani

Postado
  • Administradores
Postado

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

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.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...