如何在React+Antd中将图片对齐页面右侧并覆盖半屏高度

Looks like your current layout structure is nesting the image inside the form container, which is why it’s misaligned and staying small. Let’s restructure the component and update the styles to get that clean 50% form / 50% full-height image layout you’re after.

Modified Component Code #

First, here’s the updated React component with a corrected layout structure:

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.loginContainer}>
        <Helmet title="Login" />
        {/* Left: 50% Width Login Form Section */}
        <div className={styles.formSection}>
          <div className={styles.title}>
            <h1>Welcome</h1>
            <p className={styles.par}>
              Please enter your credentials to proceed.
            </p>
          </div>
          <div className={styles.formWrapper}>
            <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 size="default" />)}
              </Form.Item>
              <Form.Item label="PASSWORD">
                {form.getFieldDecorator('password', {
                  initialValue: 'SurfsideAdmin',
                  rules: [{ required: true, message: 'Please input your password' }],
                })(<Input size="default" type="password" />)}
              </Form.Item>
              <Form.Item>
                <div className={styles.formActionsRow}>
                  {form.getFieldDecorator('remember', {
                    valuePropName: 'checked',
                    initialValue: true,
                  })(<Checkbox>Remember me</Checkbox>)}
                  <Link to="/user/forgot" className={styles.forgot}>
                    Forgot password?
                  </Link>
                </div>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  loading={fetching}
                  className={styles.signInButton}
                >
                  Sign in
                </Button>
              </Form.Item>
              <div className={styles.registerLinkWrapper}>
                <p className={styles.paragraph}>
                  Don't have an account yet?
                </p>
                <Link
                  to="/user/register"
                  className={styles.register}
                >
                  Sign up
                </Link>
              </div>
            </Form>
          </div>
        </div>

        {/* Right: 50% Width Full-Height Image Section */}
        <div className={styles.imageSection}>
          <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="
            alt="Login background"
            className={styles.backgroundImage}
          />
        </div>
      </div>
    )
  }
}

export default Login

Corresponding SCSS Styles (style.module.scss) #

Add these styles to handle the layout and image sizing:

// Main container splits screen into two equal parts
.loginContainer {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

// Left form section (50% width)
.formSection {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6rem;
  box-sizing: border-box;
}

.title {
  margin-bottom: 2rem;
  h1 {
    margin: 0 0 0.5rem 0;
    font-size: 2.5rem;
    font-weight: 600;
  }
  .par {
    color: #666;
    font-size: 1rem;
  }
}

.formWrapper {
  width: 100%;
}

// Align remember-me and forgot password links
.formActionsRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forgot {
  color: #8C54FF;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

.signInButton {
  width: 100%;
  padding: 0.75rem 0;
  font-size: 1rem;
}

// Align register link and text
.registerLinkWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  .paragraph {
    margin: 0;
    color: #666;
  }
  .register {
    color: #8C54FF;
    text-decoration: none;
    font-size: 1rem;
    &:hover {
      text-decoration: underline;
    }
  }
}

// Right image section (50% width, full viewport height)
.imageSection {
  width: 50%;
  height: 100vh;
  overflow: hidden;
}

.backgroundImage {
  width: 100%;
  height: 100%;
  object-fit: cover; // Ensures image fills the section without distortion
}

Key Changes Explained #

• Layout Restructuring: Moved the image into its own sibling container alongside the form, using flexbox on the parent to split the screen evenly.
• Full-Height Setup: Both sections use height: 100vh to take up the entire screen vertically. The image uses object-fit: cover to fill its container without stretching.
• Cleaned Inline Styles: Removed messy inline positioning (like right: '-270px') and moved all styling to the SCSS module for maintainability.
• Improved Form Alignment: Used flexbox to align form elements neatly within the 50% width section.
• Removed Conflicting Classes: Got rid of Bootstrap-style row/col classes that were interfering with the desired layout.

Optional Ant Design Style Overrides #

If you need to tweak default Ant Design styles further, add these to your SCSS:

// Adjust form item spacing
.ant-form-item {
  margin-bottom: 1.5rem;
}

// Tweak input field styling
.ant-input {
  border-radius: 4px;
  padding: 0.75rem;
}

内容的提问来源于stack exchange，提问作者Leo Bogod