防止我的图像在较小尺寸的屏幕上位于 div 后面

Question

我在更大尺寸的显示器上工作，当我在笔记本电脑上打开我的网站时，我立即意识到我的图像没有在我的 div 旁边调整其自身大小，而是实际上将其自身放在了下面？我应该怎么办？？

我已经尝试在网上寻找答案，但运气不佳，该网站似乎或运行完美，基本上仅在我的显示器上，但任何较小的东西，照片开始出现在文本下方。

我对这一切都相当陌生，在锁定期间学习新技能，所以不要对任何糟糕的代码太用力，只是在努力解决这个问题

    html, body {

      background-color: #fffaee;

      background-attachment: fixed; 

      -webkit-background-size: cover; 

      -moz-background-size: cover;

      -o-background-size: cover;

      background-size: cover;

      font-family: 'Josefin Slab', serif;

    }

    

    #container {

      position: fixed;

      float: left;

      background: ;

      width: 424px;

      color: #000000;

      padding: 15px

    }

    

    h1 {

      font-size: 4vw

    }

    

    h2{

      background: #75c1f6;

      color:black;

      padding: 5px;

      border-radius: 5px;

    }

    

    p{

      font-size: 20px

    }

    

    a {

      color:#75c1f6;

      text-decoration: none; 

    }

    

    footer {

      position: fixed;

      left: 0;

      bottom: 0;

      width: 100%;

      text-align: center;

    }

    #man {

      float: right;

    }

Answer 1

这似乎是使用像素作为容器和图像宽度的问题，如果您需要调整文本或图像的大小，请尝试使用百分比或 vh/vw

Answer 2

将以下 css 设置为img和#containerimg{height : 100%;width : 100%;z-index : 1;}并为#container#container{    height : 100%;    width : 100%;    position: fixed;    float: left;    background: ;    width: 424px;    color: #000000;    padding: 15px;    z-index : -1;}注意：z-index属性安排元素的堆栈顺序。有关更多详细信息，请参阅W3schools。

Answer 3

将图像设置width为100%喜欢img{width : 100%;height : auto;}