Как выровнять изображение CSS по правой стороне страницы и сделать так, чтобы оно занимало половину страницы?

Question

Я пытаюсь сделать изображение покрывающим правую сторону моей страницы на полную высоту.Я хочу, чтобы 50% экрана покрывалось моей формой входа, а остальные 50% - фоновым изображением.Я использую библиотеку пользовательского интерфейса antd, поэтому, возможно, мне придется пересмотреть некоторые проекты.Но сейчас я просто получаю очень маленькое изображение, не выровненное по правому краю.Может кто-нибудь помочь, пожалуйста?

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 деления и дать 50% ширины для каждого.Поместите форму в одно, а изображение в другое.

для изображения, дайте object-fit:cover, чтобы оно охватило весь дел.

Дайте display:flex для родителя, который содержит два вышеупомянутыхdivs.

Вот перо

Я использовал object-position: right, который зависит от того, на какой стороне изображения должно появиться изображение.