[BUG] half of the picture is cut out in mobile screen, but in the old version, everything was fine, can you help what to do ?

[Tigran-Kosemyan]

[jasonflaherty]

Can you provide some more detail, like an example of your code?

[Tigran-Kosemyan]

Html(
      shrinkWrap: true,
      data: html,
      style: {
        "table": Style(
          height: Height.auto(),
          width: Width.auto(),
        ),
        "tr": Style(
          height: Height.auto(),
          width: Width.auto(),
        ),
        "th": Style(
          padding: HtmlPaddings.all(6),
          height: Height.auto(),
          border: const Border(
            left: BorderSide(color: Colors.black, width: 0.5),
            bottom: BorderSide(color: Colors.black, width: 0.5),
            top: BorderSide(color: Colors.black, width: 0.5),
          ),
        ),
        "td": Style(
          padding: HtmlPaddings.all(6),
          height: Height.auto(),
          border: const Border(
            left: BorderSide(color: Colors.black, width: 0.5),
            bottom: BorderSide(color: Colors.black, width: 0.5),
            top: BorderSide(color: Colors.black, width: 0.5),
            right: BorderSide(color: Colors.black, width: 0.5),
          ),
        ),
        "col": Style(
          height: Height.auto(),
          width: Width.auto(),
        ),
      },
      extensions: [
        TagWrapExtension(
            tagsToWrap: {'table'},
            builder: (child) {
              return SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: SizedBox(
                  width: 1000,
                  child: child,
                ),
              );
            }),
        const TableHtmlExtension(),
      ],

sure Im add table style because table lines not show and parent on Html SingleChildScrollview inside Scaffold

[CHA7R1K]

I finally fix this issue by using FittedBox

Html(
            extensions: [
              TagWrapExtension(
                  tagsToWrap: {'img'},
                  builder: (child) {
                    return FittedBox(
                      child: child,
                    );
                  })
            ]
        )

Update : From issue #1307, I decide to use TagExtension instead.

TagExtension(
          tagsToExtend: {"img"},
          builder: (context){
            return FittedBox(
              child: Image(
                image: NetworkImage(context.attributes["src"]!),
              ),
            );
          }
        )

[kedarkarkee]

The FittedBox Approach didn't work for me, neither using ConstrainedBox with maxHeight works. The only solution for me is to give the image a fixed height, say 300 but it will also scale all images with lower resolution to 300. Any other solutions?