0

我确实在我的主页中创建了一个 Optin 表单。但是当我缩小浏览器时，文本字段和背景图像并没有变小。

这是我的 HTML

<div class="jpl-ebook">
  <div class="jpl-form">
    <form>
      <table width="220">
        <tbody>
          <tr>
            <td colspan="2" align="center"></td>
          </tr>
          <tr>
            <td><b>Name:</b></td>
            <td><input type="text" /></td>
          </tr>
          <tr>
            <td><b>Email:</b></td>
            <td><input type="email" /></td>
          </tr>
          <tr>
            <td></td>
            <td><input id="bigbutton" type="submit" value="GET INSTANT ACCESS!" /></td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</div>

这是CSS

.jpl-ebook {
    width: 90%;
    height: 350px;
    background: url(images/extras/book.png) no-repeat;
    position: relative;
}
.jpl-form {
    position: absolute;
    top: 170px;
    left: 190px;
}

图像背景具有 490 x 350 像素。

4

1 回答 1

1

要缩放 CSS 中提供的背景图像，请使用该background-size属性。你可能想要

.jpl-ebook {
  background-size:contain;
}

至于文本字段，通常您不会缩放这些字段。您可以通过提供百分比宽度即相对于字段的父级轻松缩放宽度width:40%。输入的高度由 CSS 确定font-size；此属性接受相对值，但这是相对于文本大小，而不是容器大小。

根据您希望如何更改要更改的文本字段的大小，可能需要使用 javascript。

于 2013-10-15T02:38:55.040 回答