时间戳

首页 > 解决方案 > 如何将css图像与页面右侧对齐并使其覆盖页面的一半？

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

问题描述

我试图让图像以全高覆盖我的页面的右侧。我希望 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

标签： reactjsantd

解决方案

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

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

给display:flex包含上述两个 div 的父级。

这是一支笔

我使用object-position: right了这取决于图像的哪一面应该出现在你面前。

推荐阅读