Image Widget with Link Shrinks to Original Size When Width Set to 100%
Summary:
When an Elementor Image Widget is set to 100% width to fill its container, it works correctly until a link is added to the image. After adding a link, the image shrinks back to its original pixel dimensions and refuses to scale to the container's full width, despite the 100% width setting.
The root cause is that adding a link wraps the image in an anchor tag (``), which has a default CSS `display: inline-block` property. This inline-block display prevents the image from expanding beyond its intrinsic width, overriding the 100% width setting.
This issue impacts users who need linked images to be fully responsive and fill their container's width, forcing them to use a custom CSS workaround (`selector .elementor-widget-image a { display: block; }`) to achieve the desired layout.
How to Replicate:
- Place a 200px wide image in a column that is wider than 200px.
- In the Image Widget's Style tab, set the width to 100%. The image should scale up to fill the column.
- Add a link to the image. The image will immediately shrink back to its original 200px width.