Back to Reports
Home / Bug Reports / Plugin → Elementor

Image Widget with Link Shrinks to Original Size When Width Set to 100%

open May 25, 2021 Plugin → Elementor

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:

  1. Place a 200px wide image in a column that is wider than 200px.
  2. In the Image Widget's Style tab, set the width to 100%. The image should scale up to fill the column.
  3. Add a link to the image. The image will immediately shrink back to its original 200px width.