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属性。你可能想要

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

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

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

使我的形式和图像背景流畅

1 个答案: