Responsive DIV for Web App List Template

[Restart Technology Ltd]

Hi everyone.

I'm currently using the below HTML to pull an image from my web app to the list template. However, I need the image to have responsive width and I wonder if anyone can help with this? If anyone can help me save time and provide the exact HTML and CSS I need to use that would be great!

<div class="sponsorlogo" style="background-image:url({tag_sponsor logo_value}); width: 180px; padding: 10px;"></div>

<style>

    div.sponsorlogo {

        float: left;

        position: relative;

        background-repeat: no-repeat;

        background-size: contain;

        background-position: center;

        width: 100%;

        height: 160px;

        color: lightgray;

        background-color: white;

        border-radius: 0px 0px 0px 10px;

    }

</style>

[BenPleysier]

Try

<div class="sponsorlogo" style="background-image:url({tag_sponsor logo_value}); width: 180px; padding: 10px;"></div>

and

<style>

    div.sponsorlogo {

        float: left;

        position: relative;

        background-repeat: no-repeat;

        background-size: contain; 100% 100%;

        background-position: center;

        width: 100%;

        height: 160px;

        color: lightgray;

        background-color: white;

        border-radius: 0px 0px 0px 10px;

        padding: 10px;

    }

</style>

[Restart Technology Ltd]

Thanks for your reply but that did not work i'm afraid. It just squished the box and image out of proportion and it was not responsive in width in any way.

[BenPleysier]

Have a look here Responsive Web Design Images

[Liam Dilley]

If your going into say a bootstrap grid framework or even if you are not, you actually should have:

width:100%;

max-width:100%;

height:auto;