根据 <div class="container"> <img src="../assets/loginback.png" alt="logo" class="photo"> <form class="form"> <div> <label for="username">用户名:</label> <input type="text" id="username" v-model="username" required> </div> <div> <label for="password">密码:</label> <input type="password" id="password" v-model="password" required> </div> <button type="submit" @click.prevent="login">登录</button> </form> </div>编写一个样式,登录放在照片旁,照片大小不变
时间: 2023-07-19 12:22:38 浏览: 59
可以使用如下的 CSS 样式来实现这个需求:
```
.container {
display: flex;
align-items: center;
}
.photo {
margin-right: 20px;
object-fit: contain;
}
```
解释一下这个样式的作用:
- `.container` 元素设置为 flex 布局,并使用 `align-items: center` 属性来垂直居中其中的元素。
- `.photo` 元素设置了 `margin-right: 20px` 属性来与登录表单之间留出一定的空隙,并使用 `object-fit: contain` 属性来保持照片的宽高比,不改变其大小。