containers with images of different sizes; container width won't go past the image width

user1189352 0
Viewed 44

I have divs with images in them stacked horizontally side by side of each other. Images are of different widths and heights.

If I make the container width's smaller than the images, all the divs are uniform nicely.

But if I make the width of the container bigger than the images, the div/container width just seems to stop at the size of the image and refuse to get any bigger. What am I doing wrong or am I misunderstanding anything? I'm still learning my HTML and CSS thank you

PS - I don't want to use background: url(...) because I need my image URLs to be dynamic. Unless this is the only way?

.test__container {
  width: 800px;
}

.test__img {
  width: 100%;
}
<div class="test__container">
  <img class="test__img" src='https://via.placeholder.com/350x150/' />
  <h1 class="test__name">Davy Crocket</h1>
</div>

css html
4 Answers

It is possible they are inside a flex container (that has display:flex). That makes it treat width property of children differently.

When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Among them are:... read more (specifically it forces items to stay on one line [no matter the count])

IT goldman0

Give the images a width of 100%. This will make them as wide as their parent, not as wide as their native size.

&__img {
  width: 100%;
}

Update (based on added context): if the parent container has a display property of flex, one has to set min-width to 100% on the image. Note: flex-wrap: wrap should also be set on parent, to prevent siblings from creating a horizontal scrollbar on parent.
An alternative solution is to give the image flex-basis of 100% and flex-shrink of 0.
However, flex calculation is dependent on several other CSS attributes of the image as well as on CSS attributes and content of siblings and of parent elements. The safest option for flex remains min-width, as it trumps the result of flex calculation (basically the flex calculation starts from the given min-width and distributes the remaining space, if any, to the flexible siblings).

userx8W70

as you can see from the snippet below wrapping your code in a flexbox container doesn't change anything by itself. There most be either additional css or something else going on.

I edited your original post. You will get help faster if you post snippets here instead of providing a link to js fiddle.

.test__container {
    width: 800px;
  }
.test__img {
    width: 100%;
  }
}

#container{
display:flex;}
<div id='container'>
  <div class="test__container">
    <img class="test__img" src='https://via.placeholder.com/350x150/' />
    <h1 class="test__name">Davy Crocket</h1>
  </div>
</div>

<br><br>

<div class="test__container">
  <img class="test__img" src='https://via.placeholder.com/350x150/' />
  <h1 class="test__name">Davy Crocket</h1>
</div>

DCR0

Try this.

<html>

<head>
  <style>
    .page {
      width: 500px;
    }
    
    .container {
      float: left;
      width: 50%;
    }
    
    img {
      float: left;
      width: 100%;
      height: 500px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class="page">
    <div class="container">
      <img src="https://news.harvard.edu/wp-content/uploads/2022/02/20220225_wondering_dog-2048x1366.jpg" alt="" />
    </div>
    <div class="container">
      <img src="https://www.princeton.edu/sites/default/files/styles/full_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg?itok=Hy5eTACi" alt="" />
    </div>
  </div>
</body>

</html>

AC Method0
Related