Why is my image passing from my div?

Asked

Viewed 255 times

-1

I set a height for my div, with 300px of height and width, but the image is leaving outside my div, but when I use the bootstrap on a card the image is totally right inside the div why it happens ?

Example 

<!DOCTYPE html>
<html>
<head>
    <title>Teste imagem</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style type="text/css">
        .conteudo{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        <img style="width: 100%;" src="https://tecnoblog.net/wp-content/uploads/2019/05/tv-4k-tcl-c6-c6us-6.jpg">
    </div>
    <div class="card" style="width: 18rem;">
      <img src="https://tecnoblog.net/wp-content/uploads/2019/05/tv-4k-tcl-c6-c6us-6.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
</body>

html css

  • Because the image is being formatted to the same size as the div, manually just add height and width on the tag <img>, in your case height = 300px

  • One way to solve this is to place the dimensions directly on the image tag: <img width="300" height:"300" src="https://tecnoblog.net/wp-content/uploads/2019/05/tv-4k-tcl-c6-c6us-6.jpg">

  • @Rafaelpassos if you do this will break the proportionality of the image because it is not square.

  • @Pedroroweder Same problem as above comment.

2 answers

2

<!DOCTYPE html>
<html>
<head>
    <title>Teste imagem</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style type="text/css">
        .conteudo{
            width: 300px;
            height: 300px;
        }

    </style>
</head>
<body>
    <div class="conteudo">
        <img style="width: 100%;" src="https://tecnoblog.net/wp-content/uploads/2019/05/tv-4k-tcl-c6-c6us-6.jpg">
    </div>
    <div class="card" style="width: 18rem;">
      <img src="https://tecnoblog.net/wp-content/uploads/2019/05/tv-4k-tcl-c6-c6us-6.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
</body>

thus his div will have a size in which your image will pick up and fit with 100% of its size

1

It turns out that in the image inside the Card has the class card-img-top, and this class defines the image with width of 100%, this means that the image will be 100% of the width of the element it is inside.

If you put an image with 100% of width within a div with 300px, this image gets with 300px wide, but if you put a picture of 500px within a div of 300px the image will burst the size of div, she will not respect the width of the div, therefore it is common to declare width:100% in the images, so that it has at most the width of the element in which it is inside.

inserir a descrição da imagem aqui

  • It refers to the first image and not the one inside the card. In case the Dbaalone response meets, because it failed to place the class . content in the div.

  • @Sam what I had understood was " but when I use the bootstrap on a card the image is totally right inside the div why does this happen ?" I think you might have looked at that point yourself

  • Yes, but then I reread the question and it became evident what he meant, although there is some confusion in the elaboration of the question.

  • @Sam was confused yes, until because in the code he does not use the class .conteo. It seems that he was testing and in the midst of errors and hits he got in doubt and pasted the code that was on the screen at the time... will know...

  • In a little while he’ll say "I forgot to put the class in the div"... see only rs

  • @Sam hahaha, typical of

  • 2

    I think the problem is that getting out, for if I were coming out I think it would solve rsrs

Show 2 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.