How do I make an img to fit div container

Question

I am trying to get my image to take up half of the width of the div and 100% of the height, but i cant get rid of this white bar at the bottom, can you help me?

Site preview

.container {
  background-color: white;
  height: 90%;
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

img {
  max-width: 100%;
  border-radius: 8px;
}

\#description {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

<main>
  <div class="container">
    <div id="photo">
      <img src="https://via.placeholder.com/300">
    </div>
    
    <div id="description">
      <div id="header"> P E R F U M E</div>
      <h2 id="name">Gabrielle Essence Eau De Parfum</h2>
      <div id="description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</div>
      
      <div id="price">
        <div id="newprice">$149.99</div>
        <div id="oldprice">$169.99</div>
        <button id="add">Add to Cart</button>
      </div>
    </div>
</main>

I tried playing with max-width and max-height but it doesn't seem to be working out

FYI, you're missing a closing div tag, and you seem to have an errant backslash in your CSS. A good editor and good formatting help spot those issues. — isherwood, Feb 21 '23 at 20:46
You seem to be asking how to cover a div with an image. That's well-documented on this site and elsewhere. Does this help? [How can I fill a div with an image while keeping it proportional?](https://stackoverflow.com/questions/14142378/how-can-i-fill-a-div-with-an-image-while-keeping-it-proportional) — isherwood, Feb 21 '23 at 20:49
browsers have defaults and doesn't look like your using a CSS framework, quick hack add `*{margin:0;padding:0}` otherwise use a CSS lib or research *CSS Reset* — Lawrence Cherone, Feb 21 '23 at 20:52

score 0 · Answer 1 · answered Feb 21 '23 at 21:11

The image white-space problem can be fixed by adding font-size: 0 to the image container. Check the two snippets below. The first has a white space and second one doesn't.

.container {
  background-color: white;
  height: 90%;
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

#photo {
  background: #000;
}

img {
  max-width: 100%;
  border-radius: 8px;
  height: 100%;
}

\#description {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

<main>
  <div class="container">
    <div id="photo">
      <img src="https://via.placeholder.com/300">
    </div>

    <div id="description">
      <div id="header"> P E R F U M E</div>
      <h2 id="name">Gabrielle Essence Eau De Parfum</h2>
      <div id="description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</div>

      <div id="price">
        <div id="newprice">$149.99</div>
        <div id="oldprice">$169.99</div>
        <button id="add">Add to Cart</button>
      </div>
    </div>
</main>

Solution

.container {
  background-color: white;
  height: 90%;
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

#photo {
background: #000;
font-size: 0;
}

img {
  max-width: 100%;
  border-radius: 8px;
}

\#description {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

<main>
  <div class="container">
    <div id="photo">
      <img src="https://via.placeholder.com/300">
    </div>

    <div id="description">
      <div id="header"> P E R F U M E</div>
      <h2 id="name">Gabrielle Essence Eau De Parfum</h2>
      <div id="description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</div>

      <div id="price">
        <div id="newprice">$149.99</div>
        <div id="oldprice">$169.99</div>
        <button id="add">Add to Cart</button>
      </div>
    </div>
</main>

Or you can set the img to `display: block` as well. Either one works. Not able to edit the answer, so posting in comment — the.marolie, Feb 21 '23 at 21:15

How do I make an img to fit div container

1 Answers1

Solution