html - 调整窗口大小时如何修复图像？

Question

当我调整窗口大小时，图像移出位置，因此与另一个 div 重叠。我该怎么做才能将图像设置到位？

这是我的网站在窗口全尺寸显示时的样子

然后当我调整屏幕大小时，图像现在已经与 div 重叠了。

我已经设法使标题 div 具有响应性，但不确定如何解决图像问题。

这是我的index.js文件

import React, { Component } from 'react';

import openLips from '../ComingSoon/img/openLips.png';

import '../ComingSoon/styles.scss';

class ComingSoon extends Component {
  render() {
    return (
      <div className="comingSoon">
        <div className="openLips">
          <img src={openLips} alt="Open lips"/>
        </div>
        <div className="comingSoonBorder">
          <p className="comingSoonText">Stay tuned<br/>
          Something is on the way</p>
        </div>
      </div>
    );
  }
}

export default ComingSoon;

这是我的styles.scss 文件

@font-face {
    font-family: 'ObelixPro';
    src: url('../../fonts/ObelixPro/ObelixPro.ttf') format('truetype'),
         url('../../fonts/ObelixPro/ObelixPro.eot') format('embedded-opentype'),
         url('../../fonts/ObelixPro/ObelixPro.woff2') format('woff2'),
         url('../../fonts/ObelixPro/ObelixPro.woff') format('woff'),
         url('../../fonts/ObelixPro/ObelixPro.svg#ObelixPro') format('svg');
}

body {
    background-color: #E4C938;
}

.comingSoon {
    margin: auto;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    height: auto;
    position: absolute;
}

.openLips {
    z-index: 2;
    position: absolute;
    top: 5%;
    left: 61%;
}

.comingSoonBorder {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80vh;
    border: 7px solid black;
    background-color: white;
}

.comingSoonText {
    text-align: center;
    font-family: 'ObelixPro';
    font-size: 7vh;
}

Answer 1

将舌头移入 .comingSoonBorder 并将其放置在相对于该容器的位置。现在，只要页面宽度/高度发生变化，它就会随之移动。另外使用 vh 设置它的宽度/高度，所以当 .comingSoonBorder 元素的宽度改变时它们也会改变。

const openLips = 'https://i.ibb.co/SK4pdjz/tongue-clipart-animated-4-transparent.png';

class ComingSoon extends React.Component {
  render() {
    return (
      <div className="comingSoon">
        <div className="comingSoonBorder">
          <img className="openLips" src={openLips} alt="Open lips"/>
          <p className="comingSoonText">Stay tuned<br/>
          Something is on the way</p>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <ComingSoon />,
  demo
)

body {
  background-color: #E4C938;
}

.comingSoon {
  margin: auto;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  height: auto;
  position: absolute;
}

.openLips {
  position: absolute;
  z-index: 2;
  right: 0;
  transform: translate(70%, -70%);
  width: 40vh;
  height: 40vh;
  background-size: cover;
}

.comingSoonBorder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80vh;
  border: 7px solid black;
  background-color: white;
}

.comingSoonText {
  text-align: center;
  font-family: 'ObelixPro';
  font-size: 7vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="demo">
  </demo>