时间戳

首页 > 解决方案 > 如何在媒体屏幕查询中保持标题图像大小？

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

问题描述

当标题图像从原始分辨率变为媒体屏幕查询时，如何保持标题图像的大小不变……如果可能，仅使用 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%;
}
}

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

标签： htmlcssheaderscreenmedia

解决方案

推荐阅读