嗨,请帮助我是开发网站的新手,不知道如何解决问题 我似乎无法使 2 个徽标图像完全响应并阻止它们在尝试不同的屏幕分辨率或尺寸时彼此和其他内容落后 该类是徽标和徽标
我不知道该怎么做,我希望这两个徽标能够充分响应并与内容保持一致
HTML
<img src="logo1.png" class="logo"> <img src="logo2.png" class="logoo"> <div class="container">
CSS
}.标志{ 最大宽度:自动; 最大高度:160px; 转换:translateY(-330px); 左边距:-37%; 位置:绝对; } .logo{ 最大宽度:自动; 最大高度:200px; 转换:translateY(-330px); 左边距:34%; 位置:绝对;
} @media 屏幕和(最大宽度:900px){ 。标识 { 最大高度:120px; /* 根据需要为较小的屏幕调整最大高度/ 转换:translateY(-300px); / 根据需要为较小的屏幕调整 translateY / 左边距:-30%; / 根据需要为较小的屏幕调整 margin-left */ 保证金顶部:5%; }
.logoo { max-height: 120px; /* Adjust max-height as needed for smaller screens */ transform: translateY(-300px); /* Adjust translateY as needed for smaller screens */ margin-left: 25%; /* Adjust margin-left as needed for smaller screens */ margin-top: 5%; } }