Share via

Image saved from RichTetxt editor into database overflows in mobile view

Donald Symmons 2,861 Reputation points
2024-01-31T11:35:52.31+00:00

After I successfully inserted text and image into database from RichText editor, the image from database overflows in mobile view. How can I make the image responsive in mobile view? This is how the image is in my database <p><img src="https://imgtr.ee/images/2024/01/26/b4c746db49890c9e4f0e06e0b2582718.png" alt="" width="660" height="308"></p> But in my mobile phone here is how it is displayed image overflow

I tried the meta tag at the top of the page but it did not work

 <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

I tried css styling to the body of the page, did not work as well

 body {
            overflow-x: hidden;
            width: 100%;
        }

This is the label control used in displaying the contents from database

<div class="contentbody" style="width: 100%; margin: 0 auto; padding-left: 3px; color: #011b33; margin-top: 0%;">
<asp:Label ID="lblTitle" runat="server" Text="" />                                         <asp:Label ID="timelbl" runat="server" Font-Size="8pt"></asp:Label>                                         &#xB7                                                <asp:Label ID="updatelbl" runat="server" Font-Size="8pt"></asp:Label>                                         <hr />
                                        <asp:Label ID="lblBody" runat="server" Font-Size="10pt" />
                                    </div>

Fetching the record from database

 private void PopulateArticle(string articleId)
        {
            try
            {
                string ArticleId = this.Page.RouteData.Values["ArticleId"].ToString();
                if (ArticleId != null)
                {
                    string query = "SELECT [ArticleId], [Title], [Body], [DatePosted] FROM [MyArticles] WHERE [ArticleId] = @ArticleId";
                    using (SqlConnection con = new SqlConnection())
                    {
                        con.ConnectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
                        using (SqlCommand cmd = new SqlCommand(query))
                        {
                            using (SqlDataAdapter sda = new SqlDataAdapter())
                            {
                                cmd.Parameters.AddWithValue("@ArticleId", ArticleId);
                                cmd.Connection = con;
                                sda.SelectCommand = cmd;
                                con.Open();
                                using (SqlDataReader read = cmd.ExecuteReader())
                                {
                                    while (read.Read())
                                    {
                                        lblBody.Text = (read["Body"].ToString());
                                        TitleLabel.Text = (read["Title"].ToString());
                                        timelbl.Text = CalCulateTime(Convert.ToDateTime(read["DatePosted"].ToString()));
                                    }
                                }
                                con.Close();
                            }
                        }
                    }
                }
                else
                {
                }
            }
            catch (SqlException ex)
            {
                string msg = "Error:";
                msg += ex.Message;
                throw new Exception(msg);
            }
        }
.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,647 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,417 questions
0 comments
Accepted answer
  1. Lan Huang-MSFT 28,841 Reputation points Microsoft Vendor
    2024-02-01T09:11:32.7033333+00:00

    Hi @Donald Symmons,

    You can try using CSS Media Queries to set the size of the image. You can set the max-width according to the phone size.

    //On screens that are 600px or less
@media screen and (max-width: 600px) {}

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
    <style type="text/css">

        @media screen and (max-width: 600px) {
            #logo img {
                width: 100%
            }
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="contentbody" style="width: 100%; margin: 0 auto; padding-left: 3px; color: #011b33; margin-top: 0%;">
            <asp:Label ID="lblTitle" runat="server" Text="" />
            <asp:Label ID="timelbl" runat="server" Font-Size="8pt"></asp:Label>
            &#xB7                                               
            <asp:Label ID="updatelbl" runat="server" Font-Size="8pt"></asp:Label>
            <hr />
            <div id="logo">
                <asp:Label ID="lblBody" runat="server" Font-Size="10pt" />
            </div>
        </div>
    </form>
</body>
</html>

    User's image

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest