Html Question posted in
Some basic documentation can be found here.

Html – why <div> container does not limit the size of the element within it?

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="root">
            <div class="conteiner">
                <img src="https://b2b.ostrovok.ru/wp-content/uploads/2022/01/1-2.jpg" class = "image">
            </div>
        </div>
    </body>
</html>

why if I write like this, the image changes its size:

.image {
    width: 30vw;
}

but if I try to resize the div container nothing changes

.conteiner {
    width: 30vw;
}

in my opinion, the container should limit the size of the element in it

Tags:

2

Answers


  1. 0

    .image {
    width: 100%;
    display: block:
    }

    Login or Signup to reply.
  2. 0

    Yes, in this other question you can find more information: How to fit a image in div wather image size is max then div or min then div

    You could do something like this:

    .conteiner {
  width: 30vw;
}

.conteiner .image {
  width: inherit;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search