Question

我希望通过媒体查询将徽标缩小到适当大小。我希望不必给出保持图像特定高度或宽度的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

您不需要媒体查询，您使用徽标作为背景，因此您需要添加以下内容：

.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;
}

如何使用一个图像并让它通过媒体查询进行缩放响应？

1 个答案: