Kevin Powell - Community•9mo ago

Making an image take the height of the div it is inside of

Problem I want the image on the right (yellow outline) to start shrinking down if the red outline div height shrinks. Currently the yellow outline image height is taking priority, but I want the red outline div to take priority so the image inside it shrinks. Example videos provided of the issue happening when the image is present and also how the element behaves when the image is not present. I would want the element to behave just how it does when the image is not present, but to have the image still there hugging the right corner, taking up just the space that it requires. ##What I've tried I've tried using various display:flex and display:inline-block variations along with width:100%, but I haven't ran into a combination that would work right.

13 Replies

Spud•9mo ago

Code HTML

<a href="/level-design/halo-infinite/titanium.html">
  <div class="vidContainer">
    <video autoplay loop><source src="/assets/video.mp4" type="video/mp4">Your browser does not support the video tag.</video>
      <div class="vidOverlay">
        <div class="vidOverlayText">
          <p><strong>Titanium</strong><p>
          <p><strong>Fast-paced</strong> competitive 4v4 map utilizing a <strong>rotational layout</strong> set near a Titanium mine.</p>
          <ul class="tags tagsVideo">
            <li class="tagOrig">Original</li>
            <li class="tagSolo">Solo</li>
            <li class="tagSize">4v4</li>
            <li class="tagMap">Map</li>
          </ul>
        </div>
        <div class="vidOverlayImg">
          <img src="/assets/haloinfinite_small.png">
        </div>
    </div>
  </div>
</a>

<a href="/level-design/halo-infinite/titanium.html">
  <div class="vidContainer">
    <video autoplay loop><source src="/assets/video.mp4" type="video/mp4">Your browser does not support the video tag.</video>
      <div class="vidOverlay">
        <div class="vidOverlayText">
          <p><strong>Titanium</strong><p>
          <p><strong>Fast-paced</strong> competitive 4v4 map utilizing a <strong>rotational layout</strong> set near a Titanium mine.</p>
          <ul class="tags tagsVideo">
            <li class="tagOrig">Original</li>
            <li class="tagSolo">Solo</li>
            <li class="tagSize">4v4</li>
            <li class="tagMap">Map</li>
          </ul>
        </div>
        <div class="vidOverlayImg">
          <img src="/assets/haloinfinite_small.png">
        </div>
    </div>
  </div>
</a>

CSS

.vidContainer {
    position: relative;
    width: 100%;
    margin: 10px 10px 0 0;
    outline: 1px solid green;
}

.vidOverlay {
    position: absolute; 
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    transition: .3s ease;
    opacity:0.9;
    padding: 10px 15px;
    text-align: left;
    box-sizing: border-box;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    outline: 1px solid blue;
    display:flex;
}

.vidOverlayText {
    outline: 1px solid red;
}

.vidOverlayImg {
    outline: 1px solid yellow;
}

@media only screen and (max-width: 550px) {
    .tagsVideo {
        display: none;
    }
}

.vidContainer {
    position: relative;
    width: 100%;
    margin: 10px 10px 0 0;
    outline: 1px solid green;
}

.vidOverlay {
    position: absolute; 
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    transition: .3s ease;
    opacity:0.9;
    padding: 10px 15px;
    text-align: left;
    box-sizing: border-box;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    outline: 1px solid blue;
    display:flex;
}

.vidOverlayText {
    outline: 1px solid red;
}

.vidOverlayImg {
    outline: 1px solid yellow;
}

@media only screen and (max-width: 550px) {
    .tagsVideo {
        display: none;
    }
}

Bump

ἔρως•9mo ago

have you tried the latest reset that kevin released on youtube? and, possibly, starting over on the image sizes and styles?

Coder_Carl•9mo ago

I'm unsure about your exact requirements because I cant see the codepen or any example to actually play with but this should do it If you want anything more specific you are going to have to set some code up somewhere

/* flex works fine imo */
.vidOverlay {
  display: flex;
  height: 200px;
}
.vidOverlayText {
  flex: 1 0 80%;
}
/* establish that the image can actually get smaller than the min-width that is set by default */
.vidOverlayImg {
  min-width: 0;
  flex: 1 1 0%;
}
/* a little peace of mind styling for your image to keep it looking like it should */
img {
  width: 100%;
  display: block;
}

/* flex works fine imo */
.vidOverlay {
  display: flex;
  height: 200px;
}
.vidOverlayText {
  flex: 1 0 80%;
}
/* establish that the image can actually get smaller than the min-width that is set by default */
.vidOverlayImg {
  min-width: 0;
  flex: 1 1 0%;
}
/* a little peace of mind styling for your image to keep it looking like it should */
img {
  width: 100%;
  display: block;
}

ἔρως•9mo ago

don't forget to reset the height to auto or the image will stretch without keeping it's aspect ratio

Coder_Carl•9mo ago

it shouldnt ever take up more than 10% of the available width. As I said without a working example there isnt any way to ensure that an edge case wont cause problems. I have 0 idea if they have a max width on this banner if this is supposed to be reusable. what the banner is going to be rendered like when the video fails to load if they are reserving space anywhere etc. etc.

ἔρως•9mo ago

yes, but it is still a good idea to set it and also set a size in the image itself (just in case the css didn't load yet when the image is ready)

Coder_Carl•9mo ago

do you want to reserve that space if the image doesnt load though?

ἔρως•9mo ago

yes, otherwise the image explodes in size and things look really weird (and lighthouse complains about it)

Coder_Carl•9mo ago

what I am saying though is that you probably dont want a random space to be appearing on the banner if there is no image a minor impact on lighthouse will end with a better UX

glutonium•9mo ago

well u have alt text to let the user know

Spud•9mo ago

Thanks guys, with the help of Carl, I just gave the img tag inside the vidOverlayImg class a width of 100% and it did the trick. Also a margin-right of 10px is added in the video to the vidOverlayText class. I'm fine with how this performs, even if the image doesn't load for the user.

Coder_Carl•9mo ago

ah ,thought you wanted the image to get smaller 🤦 I must have misunderstood

ἔρως•9mo ago

also, there is progressive loading does it work the same if you change it to max-width?

Gaming

Programming

Making an image take the height of the div it is inside of