0

I am developing an information board for a university club of mine. I almost have it complete, except I have one annoying bug left: The center image expands beneath the viewport.

The image is supposed to shrink and expand to stay between the two side columns, which it does because of a percentage width css attribute. However, I would like it to not expand further once the bottom of the image makes contact with the bottom of the viewport; it should simply remain centered.

For the life of me I cannot get a solution that both stops it from growing beyond the bottom of the page without mangling the aspect ratio of the image.

I thought I was on to something with object-fit: contain but alas, it appears width will always prioritize itself over object-fit.

Any help would be much appreciated, as I'm quite new to web dev.

Here is a link to a client-side view of what I have so far: https://jsfiddle.net/ydumcrnk/

Thane
  • 372
  • 4
  • 8
  • object-fit doesn't work with div – Temani Afif May 02 '20 at 22:18
  • @TemaniAfif Welp that'd be a good reason for it not to work. What would you recommend as a container other than div? I should also mention that when directly applied to the img and video tags, it still has no effect. – Thane May 02 '20 at 22:20
  • object-fit is not what you need here. You need to fill the remaining height of the screen: https://stackoverflow.com/q/90178/8620333 – Temani Afif May 02 '20 at 22:21

1 Answers1

0

Have you looked into display: flex? You can wrap a div around the three .column classes, give that container div a property of display:flex and then you can add some subsequent properties that will line up the .column classes the way you want.

Here is a page on the subject I reference often.

rguttersohn
  • 464
  • 5
  • 15
  • Brilliant! I'm able to get my look in a much cleaner fashion. However... I'm still unable to get the image to stop growing in height once it hits the viewport. – Thane May 02 '20 at 23:48
  • Have you tried setting the height with px and not setting the width? – rguttersohn May 03 '20 at 00:12
  • even with max-width set, if I specify an absolute max height in px it works extra as intended. However, this means I have massive empty space on the sides of the image and below the entire flex once the browser window exceeds that hard coded pixel count. That's why ideally I'd like to use the percent unit, however it seems that is completely ignored. – Thane May 03 '20 at 00:19
  • I just realized you didn't set any style on the body element. Give the body a static width and margin of auto. That will give you a better place to start. – rguttersohn May 03 '20 at 01:17
  • This does work, but only moves the problem elsewhere. I would need to somehow update the height to the actual pixel height constantly. – Thane May 03 '20 at 01:41
  • Should have clarified. Change the width back to a percent. – rguttersohn May 03 '20 at 01:51