How to make Thumbnail Responsive?

  • deondazy

    (@deondazy)


    9 years, 10 months ago

    Please this is kinda urgent and any reply would be so much appreciated.

    I’m working for a client and the deadline is almost up, I’m making a theme like the one used at http://damn.com but I have a big problem…

    How can I get my images to be responsive like their own, I used inspect element to check how it is styled but I noticed the element property changes on different screen size.

    I suppose this is js which I’m not really good at, PLEASE can someone help me out with how I can do the same thing on the theme I’m creating without having to use plugin.

    Thanks a lot <3 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • catacaustic

    (@catacaustic)

    9 years, 10 months ago

    You don’t need Javscript to do it. You jsut need CSS, and maybe some extra tags in your HTML code.

    Something like this…

    HTML code:

    <div class="thumbnail"><img src="http://example.com/image.jpg" alt="My Thumbnail" /></div>

    Notice that there’s no width=”” or height=”” attributes. Leave those out!

    CSS code:

    div.thumbnail {
    width: 20%;
    max-width: 150px;
}
div.thumbnail img {
    max-width: 100%;
    height: auto;
}

    The trick here is that the image will display at any width up to 100% of it’s size, and the width is determined by the containing <div> element with the height always being set to the correct ratio for that image.

    Of course you will need to adjust the values in the CSS to suit your own site, but that’s the basics of how it’s done.

    Thread Starter deondazy

    (@deondazy)

    9 years, 10 months ago

    That didnt work for me. check http://damn.com and try resizing the browser window to see what i mean, and also its an inline css that changes only the height.

    thanks for your reply

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to make Thumbnail Responsive?’ is closed to new replies.