如何在图像内部获取表格以在 twitter bootstrap 上正确调整大小答案

【问题标题】：How to get form inside of image to resize correctly on twitter bootstrap如何在图像内部获取表格以在 twitter bootstrap 上正确调整大小
【发布时间】：2012-07-10 00:14:33
【问题描述】：

我正在使用基于 twitter bootstrap 的响应式 wordpress 主题。由于某种原因，侧边栏图像未正确调整大小。（您可以通过查看 [site][1] 并尝试调整大小来了解我的意思。）我通过向小部件声明一个固定大小来解决此问题，然后使用绝对相对定位将表单定位在其中。当您在桌面上时，图像/联系表单看起来不错，但是当您压缩布局（例如在 iphone 上）时，联系表单和图像无法正确调整大小。我不知道从这里去哪里，有点卡住了。

这是我现在使用的 css（可能不正确。）谢谢！

.widget .signupForm {
    /* Box always has colour, pic always on right */
    background-color: #06d0d2;
    background-image: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg);
    background-position: right bottom;
    background-repeat: no-repeat;

    /* height ensures full pic is shown  */
    height: 300px;    

    /* allow us to position contents */
    position: relative;
}

/* Absolutely position the form within the widget */
.widget .signupForm form {
 position: absolute;
 right: 160px;  
 bottom: 0px;
}

.widget .signupForm form input {
 display: block;
}

@media screen and (min-width: 768px) {


/* now just resize the widget box and move the form */

.widget .signupForm {
 width: 300px; 
 height: 240px;
 background-size: 100%;    
}

    .widget .signupForm form {
        right: 120px;   
        bottom: 0px;
    }

【问题讨论】：

您希望您的侧边栏保留为侧边栏吗？现在，它位于内容下方。您对调整大小的预期结果是什么？
没有。我希望正确调整大小。例如，当第一个图像低于内容区域时，它不会保持正确调整大小。它从正方形变成了长方形。
@VivekChandra 只是想跟进看看您对此是否有任何其他想法。谢谢。

标签： css wordpress twitter-bootstrap responsive-design

【解决方案1】：

我可以在 800px 的宽度上检测到 3 个问题：

.widget .signupForm 的宽度为 300 像素。它应该是auto 或100%。然后如果需要，表单元素将相应地调整大小（顺便说一下，提交按钮与文本输入具有相同的文本和背景。看起来我们有 2 个信息要输入，而实际上它是操作按钮。它不需要是白色的在蓝色上，也许深灰色就足够了。不过，我不是设计师；））
Facebook 小部件具有固定宽度。是否存在此小部件的移动版本？
与 Instagram 相同的问题：图像的 HTML 宽度属性为 300（像素）。

【讨论】：

谢谢。我尝试添加 100%，但没有成功。图像仍然没有正确调整大小。此外，如果您调整侧栏进入内容区域的位置，您将遇到更多问题。此外，在侧边栏进入内容区域之前，您会注意到页面底部的小图像也没有很好地调整大小。（用于 reeces Rainbow 和服装公司形象的那个。）这是一个正确调整大小的 jfiddle，但在我的主题中它不像这样工作。试图弄清楚我错过了什么。 jsfiddle.net/andrewheins/9PrG2/5
您对此有什么其他想法吗？

【解决方案2】：

以下 css 在调整大小时适用于您的页面。不确定哪个文件正在应用它。在您的 css 文件中找到此类并为其添加宽度，如果您希望它是完美的正方形或任何其他值，请说 width:300px。

.widget .signupForm {
    background-color: #06D0D2;
    background-image: url("http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg");
    background-position: right bottom;
    background-repeat: no-repeat;
    height: 300px;
    width:300px; /* code added here */
    position: relative;
}

希望它有所帮助，如果我没有理解您的问题或者这不是您正在寻找的解决方案 - 请发表评论..

【讨论】：