Maintain image heigth, but reduce width on resize

  • Resolved arctrinity

    (@arctrinity)


    8 years, 3 months ago

    The webpage in question is https://arctrinity.com/

    Underneath the slider there are four ‘images’, I duplicated the row just so you can get the point of what I want. The top row is what I would like it to look like. The image stays in the center and maintains the height on window resize, but reduces the width without distorting the image. I can achieve this with a background image (which is the top row) but don’t want to use a background image as I can’t make the entire div a clickable link in that case. I would like to use an actual image in each box so the whole image will be clickable but I can’t seem to figure out how to maintain the height without the image getting distorted on browser resize because of the width. I’ve been searching forever and thought I found some solutions but none of them seem to achieve what I want.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator t-p

    (@t-p)

    Since that is a commercial theme, we ask that you please go to their official support channel, so you can get support from the people who know it best.

    https://themify.me/

    Forum volunteers are also not given access to commercial products, so they would not know why it is not working properly. Other community members who may have faced your issue might be able to help you but your best bet is your product’s developer.
    https://codex.www.ads-software.com/Forum_Welcome#Commercial_Products

    Thread Starter arctrinity

    (@arctrinity)

    I understand. It’s not really a function of the theme, it’s more of a general coding question. They have a paid support forum but was just seeing if I could get help here first. Thank you though.

    Normally, you can add links to backgrounds with div element. But if you insist to use this theme’s customization I don’t know how to do it.

    You can divide the row in 4 columns with themify builder, then you can insert plain texts to those 4 columns. And you can insert you own codes to those text areas and style them in style.css file. Just to remind, before div element you must write <a href="your own link"><div> your html codes </div></a>. And in the css you must write for that div class

    background-image: url(“images’s link”);

    I hope it helps.

    • This reply was modified 8 years, 3 months ago by mrb33600.
    Thread Starter arctrinity

    (@arctrinity)

    @mrb33600

    I know html but not so much php so it was difficult to go around the theme. Trying to learn some of it now. That was the exact type of answer I was looking for though. Thank you so much for the assistance!!!!!! Going to go try it out now. Thanks agian so much!

    You’re welcome, if you need more assistance, let me know.

    Best luck.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Maintain image heigth, but reduce width on resize’ is closed to new replies.