eliaxelang007 Comments - Answer Overflow

eliaxelang007

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

I just discovered something! For anybody who still needs to remove the dependency on viewport units, you can use container queries! https://codepen.io/Eli-Ang/pen/dPbeLMp

<div class="game-container">
  <div class="game-area">
    <div class="game">
    </div>
  </div>
</div>

<div class="game-container">
  <div class="game-area">
    <div class="game">
    </div>
  </div>
</div>

* {
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.game-container {
  width: 100%;
  height: 100%;
  container: game-containment / size;
}

.game-area {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@container game-containment (aspect-ratio < 3 / 7) {
  .game-area {
    flex-direction: row;
  }
}

.game {
  background-color: royalblue;
  aspect-ratio: 3 / 7;
  flex-grow: 1;
}

* {
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.game-container {
  width: 100%;
  height: 100%;
  container: game-containment / size;
}

.game-area {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@container game-containment (aspect-ratio < 3 / 7) {
  .game-area {
    flex-direction: row;
  }
}

.game {
  background-color: royalblue;
  aspect-ratio: 3 / 7;
  flex-grow: 1;
}

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

Ok, I think it works well enough now. Thank you!

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

Ok, I think that will work. I'll get back to you in a bit to test a bit

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

Well, I want to put the div with the class .container inside an already established layout

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

Ok, so am I better off trying to use javascript to manipulate the widths and heights to get the result I want?

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

Is something like the Flutter example not possible for containers with widths and heights that aren't viewport sized?

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

In my codepen, when the flex-direction is column the element is only responsive to height changes, and when flex-direction is row, the element is only responsive to width changes.

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

I've been playing with it on my own as a fork of just_13eck's, trying to remove the dependency on the vw units, but the things I try don't seem to work. https://codepen.io/Eli-Ang/pen/dPbeLMp?editors=1100

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

It still doesn't work :/

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

If you're willing, could I please ask one more question? Is it possible to adapt the max-inline-size: calc((3 / 7) * 100vh); to work for the height of any container and not just the height of the viewport? I changed max-inline-size with something I'm more familiar with, max-width, for my convenience. I've been wanting to do something like max-width: calc((3 / 7) * 100%); where 100% is of the height and not the width, but CSS doesn't seem to have that functionality?

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

Yup! This works the same way on my machine now. Thank you so much!

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

Yeah, removing display flex worked! Is there a different way I can center it vertically?

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

Ok let me try that

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

Ohhhh

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

I opened this link

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

If so then yeah

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

Is it this one? https://codepen.io/c__beck/pen/bNbMZzY

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

Same machine but on Chrome now, and it still doesn't work. Maybe it's something wrong with how I set up my codepen?

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

Thanks so much for the explanation! I opened your codepen (https://codepen.io/c__beck/pen/bNbMZzY) on my machine, but it doesn't seem to work quite the same way. Am I doing something wrong?

37 replies

KPCKevin Powell - Community

•Created by eliaxelang007 on 1/15/2025 in #front-end

Is there something like `object-fit: contain` for non-replaced elements?

Woah! How does this work?

37 replies

Gaming

Programming