Question

我想在专门针对中小型设备的媒体查询中隐藏我的大尺寸社交媒体图标。我想将大尺寸的图标替换为适合设备容器大小的小尺寸。我尝试过宽度100％，但它不起作用，给予该值会使我的图标更大。这是我的360的html和css代码。

@media only screen and（max-width：360px）{}

<div class="social1">

                <a href="#"><img src="http://i.imgur.com/eIGaLt0.png" alt="Facebook" class="fb">
                   </a>

            </div>

CSS

 .fb {
            width:100%;
            height:auto;

    }

Answer 1

当您添加100％的宽度时，该元素将使用其父元素的整个宽度，在这种情况下，该元素大于实际图像宽度。因此，当您缩小屏幕尺寸时，图像会变大。

因此，在这种情况下，如果您希望仅在设备宽度为360或更小时缩小图像的大小，请提供固定的宽度。

.fb {       
   width:15px; // or whatever width seems right for your case
   height:auto;
}

您还可以提供宽度百分比，但您应该记住父元素的宽度。

如何在媒体查询中隐藏图像？

1 个答案: