Question

我有一个登录页面，其中包含用户名和密码的表单。有时我需要在登录表单上放置一个图像，并在较小的设备上使用所述登录表单调整大小。这是今天的登录表单

附上一张图片（只拍了一张，这不是我想象的:)）

我想我需要一些j来查找表格框的当前位置和大小，然后相应调整大小？

我不能手动调整大小的原因是，会有多个不同的登录页面，而且我需要让创建新的上下文变得非常容易。图像的大小和位置始终相同

<div class="valign-wrapper" style="width:100%;height:100%;position: absolute;">
<div class="valign" style="width:100%;">
<div class="container">
  <div class="row">
    <div class="col s12 m6 offset-m3">
      <div class="card hoverable">
        <div class="card-image">
          <div class="la-logo"></div>
          <!--<span class="card-title">Login</span>-->
        </div>
        <div class="card-content">
          <!--<span class="card-title black-text">Sign In <i class="material-icons right">more_vert</i></span>-->
          <form name="login" id="login" class="login" method="POST" action="j_security_check" target="_top">
            <div class="row">
              <div class="input-field col s12">
                <input placeholder="Username" autocapitalize="none" id="username" type="text" class="validate" name="j_username" />
                <!--<label for="firstname" class="active">First Name</label>-->
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12 ">
                <input placeholder="Password" id="password" type="password" class="validate" name="j_password" />
                <!--<label for="lastname" class="active">Last Name</label>-->
              </div>
            </div>
            <div class="row">
              <div class="center-btn">
                <input type="submit" class="la-largebtn btn hide-on-med-and-down" value="Log In" />
                <input type="submit" class="btn hide-on-large-only" value="Log In" />
              </div>
            </div>
          </form>
        </div>
        <div class="card-action">

          <div class="center-btn la-hideable">
            <a class="la-register" href="#">Register</a>
            <a class="la-forgot-password" href="#">Forgot Pasword</a>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
</div>
</div>

Answer 1

您可以根据容器的大小定义图像的大小（当图像在容器内时），然后根据您的需要将其移出容器。例如：

<div>
  <img src="http://placehold.it/350x150">
</div>

div {
  width: 400px;
  height: 400px;
  background: #ff0000;
  position: relative;
}
div img {
  position: absolute;
  width: 50%;
  right: -20%;
  bottom: 0;
}

https://jsfiddle.net/pLrdtgsg/

Answer 2

您是否尝试使用“vh / vw”作为图像大小，以便它将分别根据屏幕高度或宽度自行更新。

例如：

img{
height: 10vh;
width: 20vw;
}

在div上放置一个图像，用它调整大小

2 个答案: