如何在媒体屏幕查询中保持标题图像大小？

Question

当标题图片从原始分辨率转到媒体屏幕查询时，如何保持标题尺寸不变……如果可能，仅使用CSS和/或HTML？

来自index.html：

<header>
        <iframe src="header.html" frameborder="0" width="100%" height="240"></iframe>
    </header>

来自header.html：

<header>
<div style="display: flex; justify-content: center;">
    <a href="index.html" target="_parent"><img src="images/$RK6ZV6D.JPG" alt="logo" width="60%"></a></div>

来自main.css：

header {
    background-color: #fff;
    margin-bottom: -2%;
}
@media screen and (max-width: 1600px){
header { 
    margin-bottom: -2%;
}
header img {
    width: 100%;
}
header iframe {
    height: 200px;
    margin: -0.5% -0.5% -0.9% -0.5%;
}
}
@media screen and (max-width: 840px){
header {
    margin: auto;
}
header iframe {
    height: 165px;
}
}
@media screen and (max-width: 480px){
img {
    border: 0.5px 0.5px solid #000;
    width: 90%;
}
}

感谢您的进一步帮助和信息！