0

I'm trying to determine if object-fit: contain; can work with multiple images when supplying only a width percentage. I want all <img>'s to be the same viewable height respective to aspect ratio and thought that giving a max-width: 5%; would force an implied height. I'm willing to use a flexbox, although when I tried using that I ended up with the same problem. In the below, the second li picture ("curry_2.jpg") shrinks, but not correctly.

  div.imgbox {
  width: 100%
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  float: left;
  max-width: 5%;
  height: 100%;
}

ul li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
<div class="imgbox">
  <ul class="imgs">
    <li><img src="https://web.archive.org/web/20010806195135im_/http://rubberburner.com:80/curry_1.jpg"></li>
    <li><img src="https://web.archive.org/web/20010806195628im_/http://rubberburner.com:80/curry_2.jpg"></li>
    <!-- The above image, "curry_2.jpg" shrinks but not correctly -->
    <li><img src="https://web.archive.org/web/20010806194159im_/http://rubberburner.com:80/all_curry1.jpg"></li>
  </ul>
</div>

EDIT

I'm not sure why, but using height: vw works the way I want, by keeping the row solid. height: vh also works, but that allows the images to tumble on page resize thus appearing as multiple rows.

ul {
 list-style-type: none;
 padding: 0;
 margin: 0;
}
ul li {
 float: left;
 height: 10vw; /* height using vW... not vH? */
}
.imgs img {
 max-height: 100%;
 object-fit: contain;
}
 <div class="imgbox">
  <ul class="imgs">
   <li><img src="https://web.archive.org/web/20010806195135im_/http://rubberburner.com:80/curry_1.jpg"></li>
   <li><img src="https://web.archive.org/web/20010806195628im_/http://rubberburner.com:80/curry_2.jpg"></li>
   <!-- The above image, "curry_2.jpg" shrinks -->
   <li><img src="https://web.archive.org/web/20010806194159im_/http://rubberburner.com:80/all_curry1.jpg"></li>
  </ul>
 </div>

2 Answers2

0

I think height 100% doesn't mean anything since the page can have as much height as it wants. I think you mean to take the full heigh of the screen initially, for that try something like this 100vh i.e 

ul li {
    float: left;
    max-width: 5%;
    height: 100vh
}
ul li img {
    width: 100%;
    height: 100vh
    object-fit: contain;
}

Or using Javascript, set the height equivalent to some variable and then you can use percentage to reduce/adjust height accordingly

You can read more about it here

css get height of screen resolution

Alwaysblue
  • 9,948
  • 38
  • 121
  • 210
  • I tried that but nothing changed. I will think about using `vh/vw`, those seem to make sense. –  Dec 04 '18 at 00:23
0

First of all using object-fit has no effect here, because it only affects the image inside the <img> content box, that is if we change the height/width of the box then it will have an effect.

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  animation: object 5s linear alternate infinite;
}

.helper:before {
  content: '';
  position: absolute;
  animation: content 5s linear alternate infinite;
}

@keyframes content {
  0% {
    content: 'fill';
  }
  25% {
    content: 'cover';
  }
  50% {
    content: 'contain';
  }
  75% {
    content: 'none';
  }
  100% {
    content: 'scale-down';
  }
}

@keyframes object {
  0% {
    object-fit: fill;
  }
  25% {
    object-fit: cover;
  }
  50% {
    object-fit: contain;
  }
  75% {
    object-fit: none;
  }
  100% {
    object-fit: scale-down;
  }
}
<div class="helper">
  <img src="https://via.placeholder.com/120x150">
</div>

Second, It's not the vh or vw, you're just assigning a height to all those <li> and telling the images inside them to respect it, this works only when the images are bigger than what vh or vw will evaluate too.

say we have an image that has a height less than 10vw we don't have the same viewable height for all the images anymore.

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  float: left;
  height: 10vw;
  border: 1px solid red;
}

.imgs img {
  max-height: 100%;
}
<div class="imgbox">
  <ul class="imgs">
    <li><img src="https://via.placeholder.com/150x10"></li>
    <li><img src="https://via.placeholder.com/160x40"></li>
  </ul>
</div>

Since you want the same viewable height, then apply a fixed height the aspect ratio will be preserved since we're only applying the height, if you apply both width and height then you're basically defining a new aspect ratio.

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  float: left;
}

.imgs img {
  /* same viewable height and a solid row*/
  height: 100px;
  border: 1px solid red;
}
<div class="imgbox">
  <ul class="imgs">
    <li><img src="https://via.placeholder.com/180x120"></li>
    <li><img src="https://via.placeholder.com/80x40"></li>
  </ul>
</div>
Rainbow
  • 6,772
  • 3
  • 11
  • 28
  • Thank you. I'm still clearly still learning. The fact that I can bind height measurements to width measurements in 1 statement seems interesting too. I'm still not sure if I can force all images to the shortest height of all images by only stating a width in percentage. –  Dec 04 '18 at 22:16
  • setting the width only will cause the height to adjust just to preserve the aspect ratio, doesn't mean all images will have same height. – Rainbow Dec 04 '18 at 23:05
  • Right. I can use .js or just flat out define a height, but I was wondering if there was something like img::first-child(magicalElementGetHeight) then apply that to all siblings... or something. I do want them all forced down to 10% height eventually, I just can't figure out how to do that and make all the images shrink accordingly to the viewport change (the way I have that almost works, they tumble underneath of each other because 1 dimension is fixed). –  Dec 04 '18 at 23:14
  • No there's no such thing in CSS you can't take an element height and assign to another, you'll to include JS or use a fixed height, maybe have the fixed height defined by JS also. – Rainbow Dec 04 '18 at 23:22