Header image resizing HTML/CSS-CodePudding

I have a problem with resizing the header image so that it fits the heading size. Both the image and the heading are in the same div but I can't seem to find the solution. I had one where it looked good on the laptop, but on a smartphone, where the screen is smaller, the image was way smaller than the heading.

I tried with several height units: %, em, rem and vh, but nothing seemed to work correctly. I also tried to have a fixed div height and using object-fit with contain or size-down max height of the image as 100%, but that also didn't work. Additionally, I am not sure about giving the div a fixed height - won't it look out of scale when viewing on various devices?

What I need is to have the home icon on the left at the same level as the heading both having the same height, no matter what device and screen size I'm on. The heading should stay centered. Does anyone have any idea what I'm doing wrong? Below the html and css - one of many versions I checked.

Apologies if the code isn't very clean, it's only my second project.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="gallery-styles.css" />
  </head>
  <body>
    <div id="top-row">
      <a href="index.html">
        <img
          id="home-icon"
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAhFBMVEX///8AAACampqgoKBOTk7p6ekpKSn8/Pz29va4uLhcXFzh4eH5 fkxMTEPDw/z8/NEREQ3NzcgICDl5eW/v788PDzX19dra2vHx8dJSUnt7e2oqKg1NTWEhIR9fX2xsbGRkZEVFRWKiookJCTR0dGAgICUlJR0dHRoaGhiYmJWVlYLCwtDLsDCAAAH klEQVR4nO2d6WKyOhCGcV9QUVHc6kLlq229//s7Wm3BmSQMYQuceX 2LHkwzJaQWI26yyq7AbmLCasvJqy mLD6YsLqq2jC4f7UbH0VecciCSd7z3pocZYedO4m1VV91wIJPxzrT/295KC9lVjuWHnbwggP29d2BTPRUf SA1pWx1fduCDCoY0b1sSHzXUALctT3boQwuVa2DD3Gx7Y1iPcqm5eAOF115M17QisxJceYUd1 /wJL46ibc7ny7GrChK2vZjWrbuVJpwf45s3eq8w4V7VQUN5fxanYoTTuA4a6lhFQkoHDdU/VI7w3za YS8K2rezLpUhnAYa7Tz6OlFpOYQ7vYaOdoLYzkTCS9IOmlrFEkpi0PoQfkhj0HoQDt0S AokPA9K4SuOEGbxdSN803GBFSK8NqmNOeXwSxdA EV11bt5Hm9r7oQTapBtP9KkzC1u3oTKMkVE/dPfKa1svWa hOQYZhEt3GqF5uUQnvrERlzAie/EX75kwg01jd/56NzxwnxCn5oleW3h Z8dwwlXxAY6J9kVfHmt2ADCLtWtrd8UV4ktp5ZHSCwUWp1VzIWopqpgQqqx7 3Q8CUajXlLnzJnT9gc0e7sIZzvwFpP4R9TJyVZE7aJQWi0XP/UT3g3asE/nxPVVvMmJLuIRReeevh9dzuf8F iEdSSCKkuwkUWZhg1m4sl O V2vNzJqS6iB6KYbqgI/Y/4LU3 qFqdoRUk4BjGEEUag/hQVQPlBvhjGjWHTST5Fvs1wfwTdVNjjMipCYDAxjDjKWWEj LlZbFyYSQ6uNdZCaVT8bbgKP9VkmETVqI3GvBGCbWDezm4AxyRpYlIdVbBfAXeSO8WNsDvF3i5Dgt4Zzo47cohjnRmrpGDyZhcpySkOrjB3AC3TfZauA4LtkIXSpC6uO04ZxRSgeNtBGFQElGWdMQEl JfnMCTiR20FAojhvSLY4 ITUDRwnRl0bq7sDX Hqihqq6hNQsYgsLhbqhiQfjOGotVpOQGITiIPtdvy5xhHHchWbmjiirjidsEx8feu46HTTUFsZxc1o5bnSU1rvEhP6O9gr04buTNlu/RQ3w55CE7VDOTjI7XkhITWMW0AVmUarvtXx4VVq37zfhiTJCaj zoQ8jPu1YudB0zYhOufMOnZaIcEq82qgFrnY Zjdkhpwj0eLgp44JW0QfhILsbGdCoZEAanBsreHDeSWkjpUgF5iiyCIRKnKQsyqQwUUJyXWmIzBbE ovn0S9I7Rj1EjwNUaOEK6odSZYydYrPcQLZY4zcqlPSEj0ZMgFZjjSiYTe9i/iJAc79Kq/hBvi74DqYyliNIKwcyRWjsMhhSfhhXaeDetMCVIcTdm6Ru13dvyD8IN0Tg9mgZOMxnDVQgMgB5rFCa4hIa2ChwZzi5oMjF59n2Yz7PMvIWlOGgqlipwMjMw37e2w5w/CA FYnAUmLlOkkmYW6v0QvhGMDEppsplhkESomE7yUoM7YfyBKEYjB4mZCuVqlEL1qmHN48xhD9XdV XM5sYFAIJz9BrWd8whKKwobTb3vTEwcZjGmruxpf4QB3XQEmdz3zVCQ8dx6dCnpXIVeDoMdZQ0P6HSV0xXbaoIA8pgdeHCjkPpmXfyXuqgDroscTp VHgUVjF61LQkn8C/pFgPncr44EesATTvjQ9ZVx1a4mUM8NSs7OsUaYQtoGSQbDSxGoLoBE/3abznUKdIJbw8ijBWbd5iGvQi9pBFLvWDGJkcNDou8GTrn8gbRCgLH525N 0HfEgwNxd4jnsWfCOcRl1AgCZM5lqISSfnH25spC79 JXv WE4nOIJ1jeiluBK0RpNgGwsn1HlqPUwuI8qhn9YeK63E43ClZJG0NXHb2Oj27K9wZ xjRnHXxaeByYWSqqA1IQrA6K0WOEpR3RCWgmufAnMP4nwaqwNReqgKI5COMtpNCIPOdikEgh1pkGWJSZkQvPFhExovpiQCc2Xo8gv6kHYFy73yoRMaJKYkAnNFxMyofliQiY0X0zIhOaLCZnQfDEhE5qv hOO4Nzh2hH2NL5WZ0KzxIRMKFbH/pXbAXI721BOqNFdirnUo/7toJ TOs9rujaQ 7y 8zLNMhfCXjiRf4Lkz/90Hoda3jST7yWzX85uB53vZ/nPC Fm/fx53h0vN5EG5vMbitcGjpf0Ix1VM0Vq90inFk84lF3QUS3HK9C0coRbxUCuSNPwVTSLUNpLt4rpdyItTSWU7uKo3mwTq3qEbsILVY/QTnihWe0Jx G3zkwoFhMyoUxMSJaxhJusCLvh5y41JTyHn5zVlLC7JTWGCZkwuZiQLCZ8igmzJ1wyIVVM BQTMmFyMSFZkeyppoSRDJgJxcqLcCxb7IYJ0YWY8CEmNJgwuvBqPQmXlSPsoF1Z1TKWsCtbADjFGLBZhHPZykxJx/Gn1SOUbBQjU2S2SUUIVdNgRdpUjtBCy5IqdT3QGmMS4TYI1uv14q6BQrd/3w4L3OgUQLwWopGEKYQWF2ZCJkxDOMljLU0mZEImZML/GeGVuLdbdQnh6tpMyIRMyIQ5EOaxPjETMiETMiET1o0wjw0lmLBYwjy2bjOLMI9NJcwizGPnGi3CuIZoE ax84lgj6N4wo16G6sg4XhmKPmSA9rytPYoabRViEHCQfeoMi/UuL7ibqqddJZNqfDWbAm0ackvrKOW8mnH7PdUAzFh9cWE1RcTVl9MWH3Vn/A/ffrIdwEnvgkAAAAASUVORK5CYII="
      /></a>
      <h1 id="header">Luna's photos</h1>
    </div>
    <div id="gallery">
      <img src="Luna00.jpeg" />
      <img src="Luna01.jpeg" />
      <img src="Luna02.jpeg" />
      <img src="Luna03.jpeg" />
      <img src="Luna04.jpeg" />
      <img src="Luna05.jpeg" />
      <img src="Luna06.jpeg" />
      <img src="Luna07.jpeg" />
      <img src="Luna08.jpeg" />
      <img src="Luna09.jpeg" />
      <img src="Luna10.jpeg" />
      <img src="Luna11.jpeg" />
      <img src="Luna12.jpeg" />
      <img src="Luna13.jpeg" />
    </div>
  </body>
</html>

CSS:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Verdana, sans-serif;
  background: black;
}

/* for header size visibility - remove later */
#top-row {
  border: 1px solid white;
}

#home-icon {
  position: absolute;
  margin-left: 20px;
  margin-bottom: 0;
  display: block;
  max-height: 100%;
}

#header {
  background: black;
  color: white;
  display: block;
  text-align: center;
}

#gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
}

#gallery img {
  width: 25%;
  height: 300px;
  object-fit: cover;
  margin-top: 8px;
  padding: 0 4px;
  border-radius: 10px;
}

@media (max-width: 800px) {
  #gallery img {
    width: 50%;
  }
}

a {
  color: darkgrey;
}

a:hover {
  color: black;
  background: darkgrey;
}

CodePudding user response：

Can you check if this is what you are looking for.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="gallery-styles.css" />
  </head>
  <body>
    <div id="top-row">
      <a href="index.html">
        <img
          id="home-icon"
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAhFBMVEX///8AAACampqgoKBOTk7p6ekpKSn8/Pz29va4uLhcXFzh4eH5 fkxMTEPDw/z8/NEREQ3NzcgICDl5eW/v788PDzX19dra2vHx8dJSUnt7e2oqKg1NTWEhIR9fX2xsbGRkZEVFRWKiookJCTR0dGAgICUlJR0dHRoaGhiYmJWVlYLCwtDLsDCAAAH klEQVR4nO2d6WKyOhCGcV9QUVHc6kLlq229//s7Wm3BmSQMYQuceX 2LHkwzJaQWI26yyq7AbmLCasvJqy mLD6YsLqq2jC4f7UbH0VecciCSd7z3pocZYedO4m1VV91wIJPxzrT/295KC9lVjuWHnbwggP29d2BTPRUf SA1pWx1fduCDCoY0b1sSHzXUALctT3boQwuVa2DD3Gx7Y1iPcqm5eAOF115M17QisxJceYUd1 /wJL46ibc7ny7GrChK2vZjWrbuVJpwf45s3eq8w4V7VQUN5fxanYoTTuA4a6lhFQkoHDdU/VI7w3za YS8K2rezLpUhnAYa7Tz6OlFpOYQ7vYaOdoLYzkTCS9IOmlrFEkpi0PoQfkhj0HoQDt0S AokPA9K4SuOEGbxdSN803GBFSK8NqmNOeXwSxdA EV11bt5Hm9r7oQTapBtP9KkzC1u3oTKMkVE/dPfKa1svWa hOQYZhEt3GqF5uUQnvrERlzAie/EX75kwg01jd/56NzxwnxCn5oleW3h Z8dwwlXxAY6J9kVfHmt2ADCLtWtrd8UV4ktp5ZHSCwUWp1VzIWopqpgQqqx7 3Q8CUajXlLnzJnT9gc0e7sIZzvwFpP4R9TJyVZE7aJQWi0XP/UT3g3asE/nxPVVvMmJLuIRReeevh9dzuf8F iEdSSCKkuwkUWZhg1m4sl O V2vNzJqS6iB6KYbqgI/Y/4LU3 qFqdoRUk4BjGEEUag/hQVQPlBvhjGjWHTST5Fvs1wfwTdVNjjMipCYDAxjDjKWWEj LlZbFyYSQ6uNdZCaVT8bbgKP9VkmETVqI3GvBGCbWDezm4AxyRpYlIdVbBfAXeSO8WNsDvF3i5Dgt4Zzo47cohjnRmrpGDyZhcpySkOrjB3AC3TfZauA4LtkIXSpC6uO04ZxRSgeNtBGFQElGWdMQEl JfnMCTiR20FAojhvSLY4 ITUDRwnRl0bq7sDX Hqihqq6hNQsYgsLhbqhiQfjOGotVpOQGITiIPtdvy5xhHHchWbmjiirjidsEx8feu46HTTUFsZxc1o5bnSU1rvEhP6O9gr04buTNlu/RQ3w55CE7VDOTjI7XkhITWMW0AVmUarvtXx4VVq37zfhiTJCaj zoQ8jPu1YudB0zYhOufMOnZaIcEq82qgFrnY Zjdkhpwj0eLgp44JW0QfhILsbGdCoZEAanBsreHDeSWkjpUgF5iiyCIRKnKQsyqQwUUJyXWmIzBbE ovn0S9I7Rj1EjwNUaOEK6odSZYydYrPcQLZY4zcqlPSEj0ZMgFZjjSiYTe9i/iJAc79Kq/hBvi74DqYyliNIKwcyRWjsMhhSfhhXaeDetMCVIcTdm6Ru13dvyD8IN0Tg9mgZOMxnDVQgMgB5rFCa4hIa2ChwZzi5oMjF59n2Yz7PMvIWlOGgqlipwMjMw37e2w5w/CA FYnAUmLlOkkmYW6v0QvhGMDEppsplhkESomE7yUoM7YfyBKEYjB4mZCuVqlEL1qmHN48xhD9XdV XM5sYFAIJz9BrWd8whKKwobTb3vTEwcZjGmruxpf4QB3XQEmdz3zVCQ8dx6dCnpXIVeDoMdZQ0P6HSV0xXbaoIA8pgdeHCjkPpmXfyXuqgDroscTp VHgUVjF61LQkn8C/pFgPncr44EesATTvjQ9ZVx1a4mUM8NSs7OsUaYQtoGSQbDSxGoLoBE/3abznUKdIJbw8ijBWbd5iGvQi9pBFLvWDGJkcNDou8GTrn8gbRCgLH525N 0HfEgwNxd4jnsWfCOcRl1AgCZM5lqISSfnH25spC79 JXv WE4nOIJ1jeiluBK0RpNgGwsn1HlqPUwuI8qhn9YeK63E43ClZJG0NXHb2Oj27K9wZ xjRnHXxaeByYWSqqA1IQrA6K0WOEpR3RCWgmufAnMP4nwaqwNReqgKI5COMtpNCIPOdikEgh1pkGWJSZkQvPFhExovpiQCc2Xo8gv6kHYFy73yoRMaJKYkAnNFxMyofliQiY0X0zIhOaLCZnQfDEhE5qv hOO4Nzh2hH2NL5WZ0KzxIRMKFbH/pXbAXI721BOqNFdirnUo/7toJ TOs9rujaQ 7y 8zLNMhfCXjiRf4Lkz/90Hoda3jST7yWzX85uB53vZ/nPC Fm/fx53h0vN5EG5vMbitcGjpf0Ix1VM0Vq90inFk84lF3QUS3HK9C0coRbxUCuSNPwVTSLUNpLt4rpdyItTSWU7uKo3mwTq3qEbsILVY/QTnihWe0Jx G3zkwoFhMyoUxMSJaxhJusCLvh5y41JTyHn5zVlLC7JTWGCZkwuZiQLCZ8igmzJ1wyIVVM BQTMmFyMSFZkeyppoSRDJgJxcqLcCxb7IYJ0YWY8CEmNJgwuvBqPQmXlSPsoF1Z1TKWsCtbADjFGLBZhHPZykxJx/Gn1SOUbBQjU2S2SUUIVdNgRdpUjtBCy5IqdT3QGmMS4TYI1uv14q6BQrd/3w4L3OgUQLwWopGEKYQWF2ZCJkxDOMljLU0mZEImZML/GeGVuLdbdQnh6tpMyIRMyIQ5EOaxPjETMiETMiET1o0wjw0lmLBYwjy2bjOLMI9NJcwizGPnGi3CuIZoE ax84lgj6N4wo16G6sg4XhmKPmSA9rytPYoabRViEHCQfeoMi/UuL7ibqqddJZNqfDWbAm0ackvrKOW8mnH7PdUAzFh9cWE1RcTVl9MWH3Vn/A/ffrIdwEnvgkAAAAASUVORK5CYII="
      /></a>
      <h1 id="header">Luna's photos</h1>
    </div>
    <div id="gallery">
      <img src="Luna00.jpeg" />
      <img src="Luna01.jpeg" />
      <img src="Luna02.jpeg" />
      <img src="Luna03.jpeg" />
      <img src="Luna04.jpeg" />
      <img src="Luna05.jpeg" />
      <img src="Luna06.jpeg" />
      <img src="Luna07.jpeg" />
      <img src="Luna08.jpeg" />
      <img src="Luna09.jpeg" />
      <img src="Luna10.jpeg" />
      <img src="Luna11.jpeg" />
      <img src="Luna12.jpeg" />
      <img src="Luna13.jpeg" />
    </div>
  </body>
</html>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Verdana, sans-serif;
  background: black;
}

/* for header size visibility - remove later */
#top-row {
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#home-icon {
/*   position: absolute; */
  margin-left: 20px;
  margin-bottom: 0;
  display: block;
  height: 4rem;
}

#header {
  background: black;
  color: white;
  display: block;
  text-align: center;
  font-size: 2rem;
  margin-left: 20px;
}

#gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
}

#gallery img {
  width: 25%;
  height: 300px;
  object-fit: cover;
  margin-top: 8px;
  padding: 0 4px;
  border-radius: 10px;
}

@media (max-width: 800px) {
  #gallery img {
    width: 50%;
  }
}

a {
  color: darkgrey;
}

a:hover {
  color: black;
  background: darkgrey;
}

CodePudding user response：

You can solve your problem with these changes:

#top-row {
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
}

#home-icon {
  margin-left: 20px;
  margin-bottom: 0;
  display: block;
  height: 40px;
}

#header {
  background: black;
  color: white;
  display: block;
  text-align: center;
  margin-left: 20px;
}

CodePudding user response：

I think JithinAji answer is a good solution.

You also asked for

icon on the left at the same level as the heading both having the same heigh

so if you prefer you can modify his code with

#top-row {
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content:center;
}

#home-icon {
  margin-bottom: 0;
  display: block;
  height: 2rem;
}

#header {
  background: black;
  color: white;
  display: block;
  text-align: center;
  font-size: 2rem;
  margin-left: 20px;
}

Anyway if you have problem with really narrow smartphone display you can add a @media to reduce the #home-incon height and #header font-size like
for example:

@media (max-width: 320px) {
  #home-icon {
    height: 1.5rem;
  }

  #header {
    font-size: 1.5rem;
  }
}