css - 如何使用一张图片并通过媒体查询使其响应缩放？

Question

我想通过媒体查询将 Logo 按比例缩小。我不想不必给保存图像的 div 指定特定的高度或宽度，并让它根据浏览器的大小通过媒体查询按百分比缩小。

我尝试了一些最大和最小宽度和高度的东西，但除非我指定图像的确切尺寸，否则它会消失。

.landing_logo {
    max-width:100%; 
    max-height:100%;
    background-repeat:no-repeat;
    margin:auto;
    margin-top:30px;
}

<div class="landing_logo" style="background-image:url('<?php echo get_template_directory_uri();?>/img/mj-logo-200_200.png')">
</div>

Answer 1

你不需要为此进行媒体查询，你正在使用你的 Logo 作为背景，因此你需要添加如下内容:

.landing_logo {
    max-width:100%; 
    max-height:100%;
    background-repeat:no-repeat;
    background-size:100% /* try cover or contain to see which property fits your needs better */
    margin:auto;
    margin-top:30px;
}