防止我的图像在较小尺寸的屏幕上位于 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和#container

img{

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;

}