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

how do container queries / contain property make my container disappear – Html

Could you explain what makes my pictures disappear ?

  span,
  figure {
    container-type: inline-size;
    margin: auto;
    max-width: 10%;
    float: right;
  }
  .image img {
    max-height: 500px;
    height: max-content;
    width: max-content;
    max-width: 100%;
  }
<!DOCTYPE html>
<html>
  <body>
    <figure class="image">
      <img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" />
    </figure>
    <p>
      <span class="image ">
        <img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" /></span>
      <span class="image ">
        <img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" /></span>
    </p>
  </body>
</html>

I wanted to use a container query to know the size of figure or img, and change the layout if they’re too small (since they normally share the container width with other images too).
But any container-type property whose value is not "normal" just makes the elements disappear. huh ??
I don’t understand how that works.

Tags:

2

Answers


  1. 0

    I believe your problem is because you are using both flexbox and float. Remove float: right; from your code and use the proper flexbox way to align your items to the right.

    I don’t know what goal you are trying to achieve in the end, so it’s hard to know what to suggest here for how to better align these images

    Login or Signup to reply.
  2. 0

    float:right as it was has hidden the element. I have played around it and moved float:right to the img rather than its container, like this:

    span,
  figure {
    container-type: inline-size;
    margin: auto;
    max-width: 10%;
  }
  figure {
      margin-left: 80%;
  }
  .image img {
    max-height: 500px;
    height: max-content;
    width: max-content;
    max-width: 100%;
    float: right;
  }
    <!DOCTYPE html>
<html>
  <body>
    <figure class="image">
      <img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" />
    </figure>
    <p>
      <span class="image ">
        <img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" /></span>
      <span class="image ">
        <img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" /></span>
    </p>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search