Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
JMM
Experienced
Topic Author
Posts: 154
Joined: 02 Aug 2021, 11:18

X3 recognizes width="x" but not height ="x"

20 Feb 2022, 18:29

I have the following code on one of my Content pages, and which you can see HERE on a sample test page:

When I stipulate the height that I wish the picture displayed at, X3 does not recognize that I wish it displayed at a certain height:
Code
<img src="{{path}}/C-310.png" height="50">
However, X3 does recognize width, and displays it at the width that I wish it displayed at:
Code
<img src="{{path}}/C-310.png" width="100">
What word can I use instead of "height", in order to stipulate at what height I wish the image to show at?

Thanks in advance,
John
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: X3 recognizes width="x" but not height ="x"

20 Feb 2022, 21:23

X3 is a "responsive" website, which means some default styles are assigned to images so that they scale while keeping aspect, and scale DOWN on small screens (mobile browsers) to fit the screen. Setting width and height is a bit outdated, because how will you get that to work on small screens? It would expand to break the width of the website.

Besides, is there really any point in setting HEIGHT as opposed to WIDTH? Surely you want to keep the original aspect of your images, in which case you assign a WIDTH and the image will scale height appropriately while keeping aspect.

If you really need to set custom width/height, then use inline style attribute instead:
Code
<img src="file.jpg" style="height:100px" />
You can intermingle style="height:100px;width:200px" but that's not really useful, as image will have forced aspect which might not be correct. It's mostly normal to set either width or height to "auto", so that aspect is kept relative to the assigned width or height.

These days, it's mostly normal to NOT use pixel dimensions at all. For example, if you simply drop an image into the content, it will display at width of content, which aligns nicely. If you for some reason need smaller images or multiple images, one would normally use a basic HTML "grid" with images inside, in which case the images populate the grid cells 100% and the grid essentially controls the size and layout of images.