[BUG] Images extend beyond layout boundaries in flutter_html: ^3.0.0-beta.2

[hr1d0y]

Describe the bug:
The issue I'm facing is that the images within my HTML code are not fitting within the screen as they did in the past. When I attempted to implement the same feature again recently, I noticed that the images are no longer aligning correctly. What's happening now is that the images are extending beyond the designated container, causing only a portion of the image to be visible on the phone screen. This behaviour is different from what I experienced previously, and it's causing a disruption in the layout and presentation of the content. Attached screenshot below.

It used to work smoothly in Flutter 3.8, But after updating to 3.10 this problem appeared.

HTML to reproduce the issue:

Container(
            width: double.infinity,
            padding: EdgeInsets.symmetric(horizontal: Const.width),
            decoration: const BoxDecoration(),
            child: Html(
              data: Example["example"],
              shrinkWrap: true,
              style: {
                "*": Style(
                  fontFamily:
                      Functions.isBengaliTextPresent(example["example"])
                          ? Const.activeBengaliFont
                          : null,
                  fontSize: FontSize(DataFields.exampleFontSize.sp),
                  fontWeight: FontWeight.bold,
                ),
              },
            ),
          ),

Html widget configuration:
flutter_html: ^3.0.0-beta.2

Expected behavior:
The images within the HTML code should stay inside the designated container's padding, without extending beyond its boundaries.

Screenshots:

Before:
https://ibb.co/9h0GfRN

Now:
https://ibb.co/ngfzhpk

Device details and Flutter/Dart/flutter_html versions:
Device I checked in:
Oppo
Samsung
iTel
Symphony
Pixel 2

Package Version:
flutter_html: ^3.0.0-beta.2

[Khlimenkov]

same

[TheCarpetMerchant]

Made a PR that addresses this, at least fro the few use cases I've had. Can you guys try out #1359 to see if the use of shrinkWrap does the trick for you ?

[hr1d0y]

Made a PR that addresses this, at least fro the few use cases I've had. Can you guys try out #1359 to see if the use of shrinkWrap does the trick for you ?

ShrinkWrap is not solving my problem.
This branch solved my problem.
branch:
ed75f8f

[TheCarpetMerchant]

Huh. That's weird, since you say the problem appears in beta2, despite this fix being in beta2 ?
But oh well if it's fixed I guess you can close this.

[hr1d0y]

Huh. That's weird since you say the problem appears in beta2, despite this fix being in beta2 ? But oh well if it's fixed I guess you can close this.

Exactly. I don't know what could be the problem. But can you fix it in beta2?
I am closing this rn as my problem is fixed and I wanna thank you guys for your amazing work.

[eEQK]

After upgrading from alpha6 to beta2 I have the exactly same problem, the image extends over screen boundaries, setting width to 100% does help but then it's smaller than what it used to be on alpha6 without any width settings

alpha6 default width:

beta2 default width:

beta2 100% width:

[guuguo]

从 alpha6 升级到 beta2 后，我遇到了几个问题，图像超出了屏幕边界，将高度设置为 100% 确实有帮助，但它比 alpha6 上没有任何宽度设置的情况小

alpha6默认宽度：

beta2默认宽度：

beta2 100%宽度：

和你一模一样的问题，问题似乎并没有被解决

[ahmadsufyan455]

I have a solution, use like this

'img': Style( width: Width( MediaQuery.of(context).size.width, Unit.auto, ), )

[TheCarpetMerchant]

I have a solution, use like this

'img': Style( width: Width( MediaQuery.of(context).size.width, Unit.auto, ), )

This will stretch your smaller images with the current version. However, with the Boxfit.contain change it works perfectly.
Although one downside is that you lose the actual width information. Great stuff anyway :)

[utkarshmarwaha]

I have a solution, use like this
'img': Style( width: Width( MediaQuery.of(context).size.width, Unit.auto, ), )

This will stretch your smaller images with the current version. However, with the Boxfit.contain change it works perfectly. Although one downside is that you lose the actual width information. Great stuff anyway :)

Using the above changes, leaves empty white space over and below the image if the image is large? Any suggestion to remove the white spaces from top and bottom of the image?