调整窗口大小时如何固定图像？

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

使img标签的类名称为openLips，然后删除img周围的div标签，然后将img标签移到comingSoonBorder div中。

将render（）更改为：

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

更新.openLips样式：

.openLips {
  z-index: 2;
  position: absolute;
  top: -105%;
  left: 92%;
  height: 80vh;
}

提琴：https://jsfiddle.net/149bdnw6/3/（不具有相同的Stones图像）。

Answer 2

将舌头移到.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>