Avoid Column Images from being resized

  • Author
    Posts
  • #98147

    Hello

    Is there a trick to avoid the column images of the presentation page from being resized on mobile devices etc.?

    Currently I use the same height for the column images as the suggested width, which is automaticly determined. This is fine on computer screens, but on mobile devices the width becomes adjusted to the width of the screen size. In my case this means that square images become restangular images.
    The page is: https://traex.de

    Greetings, Frank

    Website: traex.de

    #98231

    Hello again. I just want to let you know, that I found a solution myself. And as this issue seems to be popular, I thought I should post it and give a hint to the developers below.

    To avoid images from being resized I tried the “Cryout Column”-Widgets. I found that html is allowed within these widgets. So I used html to define fixed sttributes for height and width of the image. The code looks like that:

    <div style="text-align:center"><img src="the-url-of-your-image" alt="description of your image" height="218" width="218" /></div>

    The width is defined by the Parabola Settings depending on how many columns are used. In may case 218px, which led to the same value for the height in the case of square images.

    And the hint to the developers, which of course I appreciate a lot for bringing the great theme to the people (thanks): The field for the content is titled by “text”, so one may think that html code is not alowed. If possible you may change this to “text or html”.

    Kind regards, Frank

    Website: traex.de

    #98232

    Sorry, the code needs to be marked, so the html tag looks like that:

    <div style="text-align:center"><img src="the-url-of-your-image" alt="description of your image" height="218" width="218"></div>

    #99113
    Zed
    Cryout Creations Team

    The following CSS should achieve the same result:
    body .column-image img { max-height: 100%; }


    If you like our creations, help us share by rating them on WordPress.org.
    Please read the available documentation and search the forums before posting.
    #99293

    Thanks 🙂

Viewing 5 posts - 1 through 5 (of 5 total)

You need to log in to reply to this topic.