Image won't resize

Hello,
I’m working on this really simple project where I am trying to create a mock website for a story I brainstormed a couple years ago, but I’m having issues with the image as it won’t resize no matter what I do.

Here is the HTML code:

  <div class="header-img">
    <img src="https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="cat with butterfly on nose">
  </div>

and here is the CSS code:

.img-header {
  max-width: 1024px;
  height: 768px;
  object-fit: contain;

I would appreciate the help. I know it’s something probably very simple, but for the life of me, I can’t figure it out. Any guidance is appreciated. Thank you.

P.S. I forgot to add that I had initially started with img first before adding .img-header and it didn’t work.

Your class is called header-img, not img-header.
Also, you need to style the image, not the container: .header-img img.
And add a width: 100%;

4 Likes

Sidebar comment (opinion)… If it’s a header background image, then it really is only window dressing; why not use a CSS background, instead of an img tag? Who wants their header image to be indexed by search engines? Nobody I know.

Only indexable images, for the most part, should be written into IMG elements, with appropriate FIGURE and FIGCAPTION markup and alternate text. Everything else belongs to the skin graphics category, and is in the domain of CSS.

2 Likes

Thank you so much for pointing that out!

1 Like