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

Html – How to make an image inside a div not strech?

I am making a header and there is an image inside it (I’m only worried with the left one for now) that is set with a max-width and changes size responsively. Once I haven’t set height for anything, the header’s height is dependent on the biggest element inside it. The image is normally the bigger element of the header, however, when the header’s height starts to be limited by the nav, the image starts to stretch to keep the max-width, but also keeping it the same height as the header.
I wanted the image to get smaller so it keeps the aspect ratio and fits inside the header when it gets smaller.
The header on a bigger screen

The header on a smaller screen

The image stretched

header {
  background-color: #030052;
  padding: 1.5em;
  display: flex;
  justify-content: space-between;
}

.logo {
  max-width: 22%;
}

nav {
  width: 23%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
<header class="flex">
  <img class="logo" src="./images/movon.png" alt="MovOn Logo">
  <nav>
    <h2 class="inv">Navigation</h2>
    <ul>
      <li><a href="./index.html" title="Home Page">Home</a></li>
      <li><a href="./pages/explore.html" title="Explore Page">Explore</a></li>
      <li><a href="./pages/mylist.html" title="My list">My List</a></li>
    </ul>
  </nav>
  <div class="profile-section">
    <div class="login-container">
      <a class="login-link subtext" href="./pages/login.html" title="Sign In Page">Sign In</a>
      <a class="login-link subtext" href="./pages/login.html" title="LogIn Page">Login</a>
    </div>
    <img class="icon profile-icon" src="./images/accountpicture.png" alt="Profile Icon">
  </div>
</header>

I’ve tried removing and changing the width on the image and tried setting a height and max-height to it (which changed nothing at all), but nothing worked.

Tags:

2

Answers


  1. 0

    I think the display flex property causes the image to be squashed. I would put a container around the image. Then the image always scales proportionally.

    header {
  background-color: #030052;
  padding: 1.5em;
  display: flex;
  justify-content: space-between;
}

.logowrap {
  max-width: 22%;
}

.logo {
  max-width: 100%;
}

nav {
  width: 23%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
    <header class="flex">
  <div class="logowrap">
    <img class="logo" src="https://place-hold.it/200x200" alt="MovOn Logo">
  </div>
  <nav>
    <h2 class="inv">Navigation</h2>
    <ul>
      <li><a href="./index.html" title="Home Page">Home</a></li>
      <li><a href="./pages/explore.html" title="Explore Page">Explore</a></li>
      <li><a href="./pages/mylist.html" title="My list">My List</a></li>
    </ul>
  </nav>
  <div class="profile-section">
    <div class="login-container">
      <a class="login-link subtext" href="./pages/login.html" title="Sign In Page">Sign In</a>
      <a class="login-link subtext" href="./pages/login.html" title="LogIn Page">Login</a>
    </div>
    <img class="icon profile-icon" src="https://place-hold.it/200x200" alt="Profile Icon">
  </div>
</header>
    Login or Signup to reply.
  2. 0

    Flexbox’s align-items property is set to stretch as a default so the image will always stretch up. Set align-self to center (or start if you want it alignt to the top) on the image to force that element not to stretch. See MDN for details

    header {
  background-color: #030052;
  padding: 1.5em;
  display: flex;
  justify-content: space-between;
}

.logo {
  max-width: 22%;
  align-self: center; /* addded this */
}

nav {
  width: 23%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
    <header class="flex">
  <img class="logo" src="https://placekitten.com/100/100" alt="MovOn Logo">
  <nav>
    <h2 class="inv">Navigation</h2>
    <ul>
      <li><a href="./index.html" title="Home Page">Home</a></li>
      <li><a href="./pages/explore.html" title="Explore Page">Explore</a></li>
      <li><a href="./pages/mylist.html" title="My list">My List</a></li>
    </ul>
  </nav>
  <div class="profile-section">
    <div class="login-container">
      <a class="login-link subtext" href="./pages/login.html" title="Sign In Page">Sign In</a>
      <a class="login-link subtext" href="./pages/login.html" title="LogIn Page">Login</a>
    </div>
    <img class="icon profile-icon" src="https://picsum.photos/id/237/200/200" alt="Profile Icon">
  </div>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search