flexgrid 의 특정 cell 에 이미지를 보여주려고 하는데요.

이미지가 너무 작게 나옵니다.

원래 샘플은 마우스를 가져가면 크게 보여주는 방식인 것 같은데요.

이미지 비율을 유지해서 일정크기의 폭으로 맞춰서 보여주고 싶습니다. 

현재 아래와 같이 코드를 처리하고 있구요.

          // obj에 아래와 같이 정보기입

          if (obj.key == "F$Thumbnail") {

            obj.cssClass = "cell-img";

            obj.cellTemplate = CellMaker.makeImage({

              label: "image for ${item.F_x0024_Name}",

              width: "200px",

              height: "200px",

              click: (e, ctx) => alert("Clicked image for " + ctx.item.F_x0024_Name),

            });

          }

          if (obj.key.toLowerCase() !== "urid") {

            this.colInfo.push(obj); 

          }

colInfo 배열은 아래와 같이 wj-flex-grid-column 형태로 전달합니다.

      <wj-flex-grid

        :format-item="onFormatItem"

        class="grid-box"

        id="FlexGrid"

        :allowDragging="false"

        :autoSearch="true"

        :itemsSource="data"

        :isReadOnly="true"

        :alternatingRowStep="0"

        :initialized="flexInitialized"

        :selectionMode="'Row'"

        :loadedRows="onLoadedRows"

        :child-items-path="treeChildItemsPath"

        ref="normalGrid"

        :selectionChanged="selectionChanged"

        :style="sizeStyleHeightPxGrid"

      >

        <wj-flex-grid-column 

          v-for="item in colInfo"

          :key="item.key"

          :binding="item.binding"

          :header="item.header"

          :cssClass="item.cssClass"

          :cellTemplate="item.cellTemplate"

        ></wj-flex-grid-column>

        <wj-flex-grid-filter />

      </wj-flex-grid>

style은 아래와 같이 적용해보았습니다.

<style lang="scss">

@import "../../../node_modules/@grapecity/wijmo.styles/wijmo.css";

.wj-flexgrid {

  max-height: 300px;

  .wj-cell {

    padding: 6px 10px;

    &.cell-img {

      padding: 0;

      text-align: center;

      &:hover {

        z-index: 3 !important;

        overflow: visible;

        img {

          transform: scale(3) !important;

          transition: all 600ms !important;

        }

      }

    }

  }

}

.container-fluid {

  height: 100%;

}

.top-slot {

  display: flex;

  flex-direction: row-reverse;

  flex-wrap: nowrap;

  margin: 5px;

  /* font-size: 0.8em; */

  span {

    font-size: 12px;

    color: #6e768c;

  }

}

/* .top-slot.showbutton {

  min-height: 30px;

} */

.button-row {

  min-height: 20px;

  white-space: normal;

  overflow: hidden;

}

.btn-action {

  margin-right: 4px;

}

</style>

현재는 아래와 같이 보이고 있습니다. (Thumbnail 컬럼)

빨간색으로 표시한부분 이미지의 width를 해당 컬럼의 넓이 만큼 키우고 비율을 유지해서 표시하고 싶습니다.

어떻게 하면 되는지 방법을 알려주시면 감사하겠습니다.

답변 부탁드립니다.