Equation of img by size of header

[courtlanda]

Hello, I'm putting my head hat back. An image inside the header block, how can you level img by the size of the header block?

[Jolied]

I understand your structure is as follows:

<header>
  <img src="src/images/header.jpg">
</header>

First, it's not always true. If the picture is visually background, it must be background, i.e., it shall be shown through the background. background-image: url("src/images/header.jpg");♪ In such a case, the picture shall be taken up with the help of background-size♪ In absolute/responsive units of measurement or special values such as contain (write on the larger side, not cut the picture, but on top/down or right/star will be empty) and cover (write at least, cut the picture). It's quite easy to quantify this picture: background-position: center (no or top/bottom/left/right).

However, if you still want to your structure, then the hijacking is done with help. width and heightWhich we're asking img♪ In order to write a picture of the width, while keeping the proportions, we just write:

header > img {
  width: 100%;
  height: auto;
}

Of course, the proportions may not be maintained, and the images of the size of the block may be forced to spread, but in that case, header must be clearly prescribed width and height♪