ionic-framework - 将图像拆分为离子部分

Question

我想根据 ionic 5 中的尺寸动态地将图像分成多个部分。

比方说

• 3 件
• 8件
• 任何数字

我尝试使用 css 技巧在图像上制作白色线条，但这会将图像部分隐藏在后面。

我读了这两个街区，但帮助了我

将base64图像分割成几部分

将图像分割成多个部分

我想显示选择的预览。

参考图片 请帮忙

标签： ionic-framework

Answer 1

你可以用一些风格来使用这样的东西......

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;
}

祝你好运！