Bricks Version: 1.5
Hi,
When we set a link on an image element, element dimensions (width/height) are set on the a tag and img is 100% width/height, which can lead to undesired aspect ratio (for instance with auto width).
Dimensions should be set on img tag and a tag should be left untouched.
I think it should be the same for all CSS properties.
Quick fix: Wrap image with a div and make the div a link to keep image element healthy.
Hi Yan,
Thank you very much for your report.
Can you please show the undesired aspect ratio with a concrete example?
Best regards,
timmse
Hi,
In the following screenshot, first image is a single image element with link set, and second is link div element > image element.
Both image elements have āheight: 3em; width: autoā, but in the first one, CSS is applied to the nesting a tag, which is wrong.
A client reported this to me on Safari, but canāt reproduce it myself.
(I can reproduce it with Responsively App, which seems to use Chrome engine.)
I think this is still an issue.
Do a query loop for post with featured image, use featured image use thumbnail which is 150px x 150px. BUT when linking image to the post (using bricks ālink toā ), which creates the a tagā¦
In the builder this linked thumbnail image is still 150 x 150pxā¦ but on front end is now 300 x 300px, distorted.
When link is removed, everything is fine.
So somewhere between bricks adding this to the css, is the problem.
:where(.brxe-image) img {
height: 100%;
position: static!important;
transition: inherit;
width: 100%;
}
img, picture {
max-block-size: 100%;
}
img[Attributes Style] {
width: 150px;
aspect-ratio: auto 150 / 150;
height: 150px;
}
What happens if u set the image fill Mode to contain? Does it work while keeping the a tag covering the whole area?
Yes, I tried that. Actually tried all object fit optionsā¦ that was the first thing to came to mind. But, issue is still there.
Brave Version 1.52.122 Chromium: 114.0.5735.110 (Official Build) (64-bit)
Hi guys,
Sorry, I overlooked the answer at the time.
We will check if we can change something about the behavior in Safari. The problem is that it works in all other browsers without any problems, meaning: the risk is high that changes could lead to significantly more problems than before. Especially with an element like the image element, a quick fix is certainly not a good choice.
@BGdev Can you provide me with a live link showing the issue in its simplest form?
Iām doing local dev for client site rebuild.
This issue is easily replicated and also being experienced from numerous people, so itās not an isolated issue. Also, I copy / pasted the CSS that bricks is generating for the element. You can see where bricks is overwriting the thumbnail size of 150px x 150px (in my case).
Replicate by:
Unfortunately, I canāt see the issue. The image is still 150x150 because of its intrinsic size. Thatās why Iām asking for a live link 
Thats because your just putting a 150x150px image on the page.
The issue is with featured image using the imageās thumbnail, and adding hyperlink to that featured image / thumbnail.
Yes, because you told me to do so
When I use the featured image dd tag, I get the same result as before. So again, please give me a link - that will speed things up considerably.
Hi guys,
Weāve fixed the originally reported issue in Bricks 1.8.2, now available as a one-click update in your WordPress Dashboard.
Please let us know if you are still experiencing issues.
Best regards,
timmse
Iām having the same problem that doesnāt happen with Chrome but with Firefox.
The image looks good until I set the link to the dynamic data post. I also tried putting full size but nothing changes.
In practice, the proportions of the images do not remain fixed, if I zoom the page, the images are squashed vertically.
If instead I click and drag the bottom corner of the browser to resize the window, the images also resize but always with distorted proportions.
Some idea?
Hi @DoubleGJ , welcome to the forum!
Can you please provide me with a live link where I can see the problem since I canāt replicate it? If you donāt have a live installation you can use try.bricksbuilder.io.
Thanks!
Sorry but i solved deleting all e restarting from zero and i now it works and iām not able to reproduce the issue.
Thanks anyway
