Android : Pinch zoom in webview is not scaling images, only text is getting scaled

In my android application, I have a webview. This is my layout file:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              android:weightSum="18">

    <WebView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="15"
            android:scrollHorizontally="false"
            android:ellipsize="none"
            android:id="@+id/contentTextView"
            />
    <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:id="@+id/utubeButton" android:text="Play Video" android:visibility="gone"/>

</LinearLayout>

Here is the original content(no pinch zoom):

Here is the content after zooming:

Here are my settings for the webview(comments lines of code are left to show that what has been already tried):

            webView = (WebView) findViewById(R.id.contentTextView);
            webView.getSettings().setJavaScriptEnabled(true);
//            webView.getSettings().setUseWideViewPort(true);
            webView.setWebChromeClient(new WebChromeClient());
            //webView.getSettings().setSupportZoom(true);
            webView.getSettings().setBuiltInZoomControls(true);
            webView.setWebViewClient(new WebViewClient() {
                public void onPageFinished(WebView view, String url) {
                    // do your stuff here
                    if (videoURL != null && videoURL.length() > 0 && !videoURL.equalsIgnoreCase("null")) {
                        utubeButton.setVisibility(View.VISIBLE);
                        utubeButton.setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                String video_id = Uri.parse(videoURL).getQueryParameter("v");
                                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("vnd.youtube://" + video_id));
                                startActivity(intent);
                            }
                        });
                    } else {
                        utubeButton.setVisibility(View.GONE);
                    }
                }
            });

Here is the code that sets the html content for the webview(comments lines of code are left to show that what has been already tried):

     String imgTagCode="<img src='"+imgEmbedUrl+"' width='100%' max-width='500%' alt='Image' />";
//   String imgTagCode="<img src='"+imgEmbedUrl+"' width='100%' alt='Image' />";

     webView.loadDataWithBaseURL(null, "<center><h1>" + title + "</h1></center>" + "<p>" + message + "</p> "  + imgTagCode, "text/html", "utf-8", null);

Its worth mentioning that I tried the setUseWideViewPort(true) (commented in code), but it allowed image to zoom, however that caused the text to go beyond the horizontal right margin of the screen. If I zoomed it so that it may come back to the screen margins, that caused text to be abnormally smaller.

So what is wrong here and more importantly, how do I let the pinch zoom work for the image also.