Scaling large div to fit flex container causes incorrect positioning-CodePudding

The goal is to scale content to fit within a container.

When the content is smaller than the container, the transformation works and the content is centered.

However, if the content is too big, positioning breaks. The content no longer honors the CSS rules to remain centered.

The scale value 0.300648 is meant to fit the large content (3036x2162) within the parent (900x650).

Even a smaller scale value like 0.2 fails to center the content properly.

How to get the content to remain centered, regardless of the scale value?

This JSFiddle shows the problem, with the red div representing the content (and not being centered): https://jsfiddle.net/panabee/bwpa3snk/10/

#previewBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 900px;
    height: 650px;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
}

.canvas-container {
  width: 3036px;
  height: 2162px;
  position: relative;
  user-select: none;
  transform: scale(0.300648);
}

.content {
  position: absolute;
  background: red;
  width: 3036px;
  height: 2162px;
  left: 0px;
  top: 0px;
}

CodePudding user response：

Here the content's scale will honor the size of its parent. I.e setting the scale to scale(1) would take up the parents entire container. Setting scale(.5) would take up half of the container, and remain the content-div centered. Please let me know if I didn't understand your question.

      body {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
      }

      .canvas-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1000px;
        height: 500px;
        background-color: yellow;
      }

      .content {
        display: flex;
        width: 100%;
        height: 100%;
        background-color: black;
        transform: scale(0.5);
      }

  <body>
    <div >
      <div ></div>
    </div>
  </body>

CodePudding user response：

A couple of variations, one with overflow hidden and scale(2), the other without scale. Added max-width and max height 100 % to the content and set width and height to 100 % for the container. Larger px inside smaller px usually creates trouble in my experience, so the max sizes counter that.

#previewBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 900px;
  height: 650px;
  border: 1px solid #E0E0E0;
  border-radius: 5px;
  overflow: hidden;
  /* this prevents overflow since the scale is set to 2, it can also be set to auto to make it scrollable or removed entirely to get full overflow */
}

.canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  user-select: none;
  transform: scale(2);
}

.content {
  background: red;
  width: 3036px;
  height: 2162px;
  max-width: 100%;
  max-height: 100%;
}

<div id="previewBox">
  <div >
    <div ></div>
  </div>
</div>

#previewBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 900px;
  height: 650px;
  border: 1px solid #E0E0E0;
  border-radius: 5px;
}

.canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  user-select: none;
  /* removed scale since the size matches the container anyway */
}

.content {
  background: red;
  width: 3036px;
  height: 2162px;
  max-width: 100%;
  max-height: 100%;
}

<div id="previewBox">
  <div >
    <div ></div>
  </div>
</div>