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



  • 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.



  • 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
               }@

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.