Image field adds min-size

Rooney
Topic Author
Offline
Moderator

5 years 2 months ago - 5 years 2 months ago #75718 by Rooney

Image field adds min-size was created by Rooney

Hi,
FC 3.3.x adds a size tag to the image field. Here is the original code from my page:

Code:

<img src="/images/stories/thumb/l_pilotanlage.jpg" alt="Pilotanlage im Aufbau in der Münstermann-Fertigung" class="fc_field_image" itemprop="image" srcset="https://www.muenstermann.com/images/stories/thumb/l_pilotanlage.jpg 880w, https://www.muenstermann.com/images/stories/thumb/m_pilotanlage.jpg 220w, https://www.muenstermann.com/images/stories/thumb/s_pilotanlage.jpg 220w" sizes="(min-width: 880px) 880px, (min-width: 220px) 220px, 220px" style="width: auto; height: auto;" width="880" height="500">

Problem is that in responsive mode on an iPhone for example the image is only 220px wit but it should be 100% (worked in FC 3.2)

Here is a sample page: www.muenstermann.com/de/foerdertechnik/a...m-labor-zur-vorserie

Joomla! 3.9.24 and FC 3.3.9

Last edit: 5 years 2 months ago by Rooney. Reason: Added a screenshot

Please Log in or Create an account to join the conversation.

ggppdk
Offline
Administrator

5 years 2 months ago - 5 years 2 months ago #75721 by ggppdk

Replied by ggppdk on topic Image field adds min-size

Hello

there is constant work for making FC more mobile friendly

we added (purpose is to speedup the page loading when large images are not needed)

Code:

sizes=""
srcset=""

----

And then also added

Code:

width="..."  height=""

to inform browser of real sizes and avoid page jumping (reduce rendering layout after images load)

but it seems the work is not perfect / not finished,
as it seems our CSS also needs some work ?

will look into this

-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Last edit: 5 years 2 months ago by ggppdk.

Please Log in or Create an account to join the conversation.

ggppdk
Offline
Administrator

5 years 2 months ago #75723 by ggppdk

Replied by ggppdk on topic Image field adds min-size

hello

i have looked at it
it is CSS issue

width: auto;, is not enough to achieve our goal,
we also need min-width:100%

So by using
min-width:100%; we make sure that the element grows to fit its container.

and then by also adding to the above
width: auto; we can allow the element to keep its original size, meaning it will not stretch larger that its own real size

will add the extra CSS

Please Log in or Create an account to join the conversation.

Rooney
Topic Author
Offline
Moderator

5 years 2 months ago #75726 by Rooney

Replied by Rooney on topic Image field adds min-size

Hi,
where can I change the CSS? Which file?
Rooney

Joomla! 3.9.24 and FC 3.3.9

Please Log in or Create an account to join the conversation.

ggppdk
Offline
Administrator

5 years 2 months ago #75731 by ggppdk

Replied by ggppdk on topic Image field adds min-size

Hello

i will provide a new version for you to install this evening / tomorrow
it will only have small CSS changes for forms

plus the fixes for this CSS issue and for the nested DIV error in the universal module layout

Please Log in or Create an account to join the conversation.