[Solved] HTML to CSS Image Sizing Issue

[mrcodes]

Hey Guys, I’m new this forum and to coding. I am building my first website and I ran into an issue.

My header image is not resizing. It’s showing full-size on my page, covering everything. I’m so frustrated that I can’t figure this out. Here is the code below.

HTML:

`<div id=”wrapperHeader”>

` <div id=”header”>

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

</div>

</div>
`

`

CSS (style sheet):

header {
height: 375px;
width: 1024px;
}

[Alen]

@mrcodes If the image is larger than defined width and height then you’ll have overflow, you can hide this by adding overflow: hidden;.

#header {
  width: 1024px;
  height: 375px;
  overflow: hidden;
}

You may also experiment by making the image flexible, meaning it will resize proportionally to it’s container size. You do this by adding max-width: 100%; to img element.

So

img {
  max-width: 100%;
  height: auto;
}

Example here.

[mrcodes]

Thank you very much, Alen. That worked perfectly! And thank you for explaining in a clear away.

[Author]

Posts