转换后的图像在 Bootstrap 网格中奇怪地调整大小-解网

问：

我使用 Bootstrap 网格在大屏幕上有 3 列，在小屏幕上有 2 列。

在网格内，我正在展示产品。这些产品有两个需要叠加的图像。为了实现这一点，我使用带有的容器的标准模式，并使用 .第一个（红色）图像为 500x666，而第二个（蓝色）图像为 640x320;我无法更改这些图像的大小。第二张图像需要编辑：d、d 并将（d）移动到不同的位置。此示例中的图像和应用的实际转换当然只是突出显示问题的示例。position: relativeposition: absolutetransformrotatescaletranslate

我拥有的代码如下：

.tryonline {
  position: relative;
  height: 666px;
}
.tryonline img {
  position: absolute;
  max-width: 100%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap grid image resizing problem</title>
  </head>
  <body>
    <main>
    <div class="container">
        <div class="row row-cols-2 row-cols-lg-3">
          <div class="col">
            <div class="tryonline">
              <img class="red" src="https://i.imgur.com/HiB1H8P.png">
              <img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500" style="transform: rotate(45deg) scale(0.5) translate(115px,148px)">
            </div> 
          </div>
          <div class="col">
            <div class="tryonline">
              <img class="red" src="https://i.imgur.com/HiB1H8P.png">
              <img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500" style="transform: rotate(45deg) scale(0.5) translate(115px,148px)">
            </div> 
          </div>
          <div class="col">
            <div class="tryonline">
              <img class="red" src="https://i.imgur.com/HiB1H8P.png">
              <img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500" style="transform: rotate(45deg) scale(0.5) translate(115px,148px)">
            </div> 
          </div>
          <div class="col">
            <div class="tryonline">
              <img class="red" src="https://i.imgur.com/HiB1H8P.png">
              <img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500" style="transform: rotate(45deg) scale(0.5) translate(115px,148px)">
            </div> 
          </div>
          <div class="col">
            <div class="tryonline">
              <img class="red" src="https://i.imgur.com/HiB1H8P.png">
              <img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500" style="transform: rotate(45deg) scale(0.5) translate(115px,148px)">
            </div> 
          </div>
          <div class="col">
            <div class="tryonline">
              <img class="red" src="https://i.imgur.com/HiB1H8P.png">
              <img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500" style="transform: rotate(45deg) scale(0.5) translate(115px,148px)">
            </div> 
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

我对此代码有两个问题：

在较小的屏幕上，蓝色矩形会移动 - 它不再与红色图像处于相同的位置。我尝试更改转换的顺序，但没有帮助。
在CSS中是硬编码的，但由于图像在较小的屏幕上被缩小，这是不正确的。我不确定这是否是导致第一个问题的原因，如果我能自动调整高度，蓝色矩形将保持在相同的相对位置。height: 666px

bootstrap-5 css-transforms 绝对引导网格

答： 暂无答案

上一个：当任何祖先处于位置时，3D 变换会闪烁：固定

下一个：transform-style 属性在 jsx 中不能用作内联样式

转换后的图像在 Bootstrap 网格中奇怪地调整大小

Transformed image resizing strangely inside a Bootstrap grid

评论