在图像上覆盖网格时无法调整 div 项的高度

Question

我正在使用Vue.js 和vuetify 制作SPA。

我有一个组件，它有一个背景图像，我在上面覆盖了一个网格。当我更改页面宽度时，图像会调整其纵横比。我希望在网格上具有相同的行为。

我使用 divtable.com/generate 生成了网格。它只是给了我一个 12x12 的 div 表和一些 CSS 选择器。我想精确控制我如何在此之上叠加表单，因此决定走这条路。

我无法调整 div 表格单元格的高度。宽度调整得很好并保持对齐，但无论如何单元格的高度都是恒定的。我也是一个 CSS 菜鸟。我不知道 vuetify 或 vue 是否在后台对 css 进行了一些覆盖。

我尝试了很多东西。由于某种原因，仅设置 height 属性不起作用。我尝试在样式上使用“范围”，以防某些内容被覆盖。由于某种原因，单元格的高度无论如何都不会改变。任何帮助表示赞赏。 j

可以在此处找到代码的逐字示例：http://divtable.com/generator/

唯一的区别是我在 div 表之前有以下选择器：

img {
    width: 100%;
}
.image-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

谢谢。不会问我是否不急于在明天之前解决这个问题。任何帮助表示赞赏。

注意：我尝试设置最小高度。使其范围和我发现的各种其他东西。

Answer 1

出于时间考虑，我决定根本不使用网格叠加，而只是使用相对位置调整图像上的组件。在这种情况下，使用网格叠加并没有真正的优势。

从技术角度来看，我无法找到确切的问题，但这可能不是任何框架魔法，只是没有时间找到正确的 CSS 选择器进行调整。

感谢您的帮助。非常感激。

img {
    width: 100%;
}
.image-container {
    position: relative;
    width: 95%;
    height: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 10px;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100px;
}
#loadControlDevices {
  position: relative;
  margin-top: 10.5%;
  margin-left: 1.15%;
}

  <div class="image-container" >
      <div style="height: 100%;">
        <img src="scope.ami.png" />
      </div>
      <div class="after">
        <div id="loadControlDevices">
          <v-checkbox id="loadControlCB" name="loadControlCB" label="" filled></v-checkbox>
        </div>
        ... other divs following this ...
      </div>
    </div>