[FEATURE] Support for max-width

[TheCarpetMerchant]

It would be nice to have support for max-width:100%, so that images that have a set width don't get rendered bigger then the screen.

Code I used to test things out :

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Html(
          data: '<img style="width:800px;max-width:5%" src="https://cdn.discordapp.com/attachments/840351500010258474/968560163382521946/2022-03-31_14-16-27_0503.jpg"/>',
        ),
      ),
    ),
  );
}

[Mohamed-Aziz-Mhadhbi]

You can also add SingleChildScrollView widget to ensure the content can scroll if it exceeds the screen height.

The updated code :

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Html(
            data: '''
              <style>
                img {
                  width: 800px;
                  max-width: 100%;
                }
              </style>
              <img src="https://cdn.discordapp.com/attachments/840351500010258474/968560163382521946/2022-03-31_14-16-27_0503.jpg"/>
            ''',
          ),
        ),
      ),
    ),
  );
}

[TheCarpetMerchant]

@Mohamed-Aziz-Mhadhbi This is an issue about width, not height...

[thanhle7]

It would be nice to have support for max-width:100%, so that images that have a set width don't get rendered bigger then the screen.

Code I used to test things out :

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Html(
          data: '<img style="width:800px;max-width:5%" src="https://cdn.discordapp.com/attachments/840351500010258474/968560163382521946/2022-03-31_14-16-27_0503.jpg"/>',
        ),
      ),
    ),
  );
}

I am 2nd for that

[TheCarpetMerchant]

See #1359.