如何将css图像与页面右侧对齐并使其覆盖页面的一半

Question

我试图使图像以全高覆盖我的页面右侧。我希望我的登录表单覆盖 50% 的屏幕，而其他 50% 的屏幕被背景图像覆盖。我使用的是antd UI库，所以也许我将不得不覆盖一些设计。但是现在我只是得到一个非常小并且没有向右对齐的图像。有人可以帮忙吗？

import React, { Component } from 'react'
import { Form, Input, Button, Checkbox } from 'antd'
import { Helmet } from 'react-helmet'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import styles from './style.module.scss'
@Form.create()
@connect(({ user }) => ({ user }))
class Login extends Component {
  onSubmit = event => {
    event.preventDefault()
    const { form, dispatch } = this.props
    form.validateFields((error, values) => {
      if (!error) {
        dispatch({
          type: 'user/LOGIN',
          payload: values,
        })
      }
    })
  }
  render() {
    const {
      form,
      user: { fetching },
    } = this.props
    return (
      <div className={styles.header}>
        <Helmet title="Login" />
        <div className={`${styles.title} login-heading`}>
          <h1>Welcome</h1>
          <p className={styles.par}> Please enter your credentials to proceed.</p>
        </div>
        <div className={styles.block}>
          <div className="row">
            <div className="col">
              <div className={styles.inner}>
                <div className={styles.form}>
                  <Form layout="vertical" hideRequiredMark onSubmit={this.onSubmit}>
                    <Form.Item label="EMAIL ADDRESS">
                      {form.getFieldDecorator('email', {
                        initialValue: 'surfside-strapi',
                        rules: [{ required: true, message: 'Please input your e-mail address' }],
                      })(<Input style={{ width: '80%' }} size="default" />)}
                    </Form.Item>
                    <Form.Item label="PASSWORD">
                      {form.getFieldDecorator('password', {
                        initialValue: 'SurfsideAdmin',
                        rules: [{ required: true, message: 'Please input your password' }],
                      })(<Input style={{ width: '80%' }} size="default" type="password" />)}
                    </Form.Item>
                    <Form.Item>
                      {form.getFieldDecorator('remember', {
                        valuePropName: 'checked',
                        initialValue: true,
                      })(<Checkbox>Remember me</Checkbox>)}
                      <Link to="/user/forgot" className={styles.forgot}>
                        Forgot password?
                      </Link>
                    </Form.Item>
                    <div className="form-actions">
                      <Button
                        type="primary"
                        className="width-150 mr-4"
                        htmlType="submit"
                        style={{ width: '80%' }}
                        loading={fetching}
                      >
                        Sign in
                      </Button>
                      <span className="ml-3 register-link">
                        <p className={styles.paragraph}> Dont have an account yet ?</p>
                        <Link
                          to="/user/register"
                          style={{
                            position: 'relative',
                            /* left: 0%; */
                            right: '-270px',
                            top: '-33px',
                            bottom: '0%',
                            fontfamily: 'Rubik',
                            fontsize: '15px',
                            color: '#8C54FF',
                          }}
                          className={styles.register}
                        >
                          Sign up
                        </Link>{' '}
                      </span>
                    </div>
                  </Form>
                //image that i want to be aligned to right side <div className="col-xl-7"> <img src="https://media.gettyimages.com/photos/clear-empty-photographer-studio-background-picture-id538493760?b=1&k=6&m=538493760&s=612x612&w=0&h=8zp1RB3PQuARtpemaBvtrdqecBLg_258_XZOuOkzsxc="/></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default Login

Answer 1

创建 2 个div 并为每个div 提供 50% 的宽度。将形式放在一个中，将图像放在另一个中。

对于图像，请给出object-fit:cover，以便它将覆盖整个div。

为包含上述两个div 的父级提供display:flex。

这是一支笔

我使用了object-position: right这取决于图像的哪一侧图像应该为您出现。