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

Question

i want to hide my large size social media icon on media queries specially for small-medium devices. I want to replace the large size of the icon to small size which fits inside the device container size. I have tried width-100% but it is not working, giving that value will make my icon more large. Here is my html and css code for the 360.

@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

When you add a width of 100%, the element will use the full width of its parent element, which in this case is greater than the actual image width. So that is why the image becomes large when you reduce the screen size.

So, in this case if you want the size of the image to be reduced only for a device width of 360 or less, provide a fixed width.

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

You can also provide width in percentage, but you should keep in mind the width of the parent element for this.