Split Image into parts ionic

Question

I want to divide the image into multiple parts dynamically based on dimensions in ionic 5.

let's say

• 3 piece
• 8 piece
• any number

I tried css tricks to make white color line on image but that hides the image portion behind.

I read this two blocks but helped me

split base64 image into parts

Split image into parts

I want to show preview of selection.

reference image Please help

Answer 1

you can use something like this with some styles...

HTML:

 <div class="image-holder">
    <img src="./assets/images/defaultCompanyPic.png">
    <div class="grid">
      <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
      <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
      <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
      <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
    </div>
  </div>

CSS:

.image-holder {
  width: fit-content;
  height: fit-content;
  position: relative;
}

.image-holder img {
  width: 300px;
  height: 400px;
}

.image-holder .grid {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px gray solid;
}

.image-holder .grid .row {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.image-holder .grid .row .cell {
  flex-grow: 1;
  box-sizing: border-box;
  border: 1px gray solid;
}

Good Luck!