css - 使我的表格和图像背景流畅

Question

我的主页中确实创建了一个 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 像素。

Answer 1

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

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

至于文本字段，通常您不会对其进行缩放。您可以通过提供百分比宽度(即width:40%)相对于字段的父级很容易地缩放宽度。输入的高度由 CSS font-size 决定;此属性接受相对值，但这是相对于文本 大小，而不是容器 大小。

根据您想要更改文本字段大小的方式，可能需要 javascript。