Html 如何使引导行的两个列（一个带窗体，一个带图像）具有相同的高度，并且也具有响应性

我有两个引导列，一个有表单，另一个有图像。图像分割被设置为100%宽度，当调整屏幕大小时，它会得到响应。但无论屏幕大小如何，窗体都处于相同的高度

请参考以下代码

请求办公空间
呜呜呜呜




提交请求

若我理解，当图像变小时，您希望看到图像与表单底部对齐。您可以将列本身与类

mt auto

（页边距顶部：auto）对齐

演示：

表单{
背景：黄色；
}

请求办公空间
呜呜呜呜




提交请求

如果希望表单以某种方式调整大小，使其与图像的高度相同，则不会发生这种情况

图像表现出响应性的原因是它具有纵横比。也就是说，它有自己固有的高度和宽度。这里要做的是只设置宽度，因为纵横比，所以图像高度会相应地调整

默认情况下，表单元素具有固定大小。它们不应该像图像那样缩放

您可以改为在输入上设置100%的宽度，并让宽度由父容器的宽度确定。但是，这不会以任何方式影响表单元素的高度

其css如下所示：

input[type="text"] {
    width: 100%;
    /*you also need to change box-sizing,
    since the input itself already has a padding
    and a border and would exceed the boundaries
    of the parent container because of that:*/
    box-sizing: border-box;
}

<input type="text" class="formtextarea" placeholder="Business Name">

请注意，我使用了

[type=“text”]

。仅当您在输入上设置类型文本时，此选择器才会工作，如下所示：

input[type="text"] {
    width: 100%;
    /*you also need to change box-sizing,
    since the input itself already has a padding
    and a border and would exceed the boundaries
    of the parent container because of that:*/
    box-sizing: border-box;
}

<input type="text" class="formtextarea" placeholder="Business Name">

---

如果您想根据屏幕的宽度或高度调整布局，我建议您查看css中的媒体查询。

这可以通过引导来完成，但需要克服3个问题：

图像必须是其父列高度的100%，但不得影响其父列高度解决方案：将其设置为背景图像：

.行.图像列{
背景图像：url（url(http://dummyimage.com/600/f0d/&text=illo.png);
背景重复：无重复；
背景尺寸：自动100%；
背景位置：右中；
}

---

当窗口小于中等时（您希望表单的布局是什么？堆叠在图像上后的高度是100vh？@G-Cyr我希望表单列的高度随右列中图像的高度而变化。但是，现在表单列的高度与屏幕大小无关。好的，将div转换为表单标记（此处缺少此标记），但内容仍会停留在左上方。

表单内容img

您的图像的比例/大小是多少？@G-Cyr我更改了，谢谢。您能帮我将右侧的图像垂直对齐到底部吗？是的，我想我们正在缩小，请在我调整页面大小时参考图像。下面有一个空白w左栏的表单看起来不太好。@DurairajSaravanan您是否在fullpage中运行了代码段并调整了浏览器大小，添加了类

mt auto

，空白显示在顶部。否则我完全误解了：）（用类更新了两列）是的，你说得对，图像的高宽比是有反应的，我们不能期望在形式上也有同样的反应。谢谢你的时间，真是我想要的