CODEWITHSUNDEEP
cssimageresponsive-design
user2684452
user2684452

Reputation: 731

How to use one image and have it scale responsive via media query?

I want to have a logo scale down to size via media query. I want to not have to not give the div that holds the image a specific height or width, and for it to scale down by percentage via media query depending on the size of the browser.

I have tried a few things with max and min width and height, but unless I specify the exact dimensions of my image, it disappears.

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

Upvotes: 0

Views: 70

Answers (1)

Devin
Devin

Reputation: 7720

you don't need media queries for this, you're using your logo as a background, therefore you need to add something like:

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

Upvotes: 2

Related Questions