[SOLVED] How to adjust image size retrieved from XML in WebView in QML?

honeyhong · wrote on 8 Aug 2012, 08:31

Hey. I resized my WebView and to fit the screen, but only the text could fit nicely, not the image.
After scaling, the text in the image, will scale to small along with the image, which made it hard to read.

@ Flickable {
id: flicker1
width: window.width
height:parent.height
anchors{left:parent.left; leftMargin:5; right:parent.right; rightMargin:8}
flickableDirection:Flickable.VerticalFlick
contentWidth: web.width
contentHeight: web.height
clip: true

            WebView {
                id:web
                html:itemNews
                transformOrigin: WebView.TopLeft
                preferredWidth: window.width - 10
                preferredHeight: window.height
                settings.defaultFontSize : (window.width/480)*25
            }@

The XML that I retrieved the data from contained image that are predetermined with width and height. Which made it hard for me to fit it in the device screen.
Eg :
img src="http://www.appsfactory.my/client/canonmsia2/images/uploadfiles/ICP/Products/IXUS240HS-1.jpg" style="width:700px;height:985px;vertical-align:middle"

Can anyone show me how can I manually adjust the image size.

honeyhong · wrote on 14 Aug 2012, 09:23

Solved it with some hints from my friend.
Set it like this. The item fit in nicely.
@WebView {
id:web
html: "<html><head><content="width=device-width"/><style>
img{max-width:100%;max-height:device-height;}
a:link {color: #0000FF; text-decoration: none;}</style>
</head><body style="color:black">"+itemNews+"</body></html>";

transformOrigin: WebView.TopLeft
preferredWidth:window.width - 10
settings.defaultFontSize : (window.width/480)*25
           }@