如何使 2 个徽标图像完全响应?请给我一些网络开发指南,我是新手

问题描述 投票:0回答:0

嗨,请帮助我是开发网站的新手,不知道如何解决问题 我似乎无法使 2 个徽标图像完全响应并阻止它们在尝试不同的屏幕分辨率或尺寸时彼此和其他内容落后 该类是徽标和徽标

我不知道该怎么做,我希望这两个徽标能够充分响应并与内容保持一致 this is what the site looks like when i try on different device but its fine on my pc this is what it looks like on other laptop

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%;
} }
javascript html css web responsive-design
© www.soinside.com 2019 - 2024. All rights reserved.