Question

我从Image元素中的数据库中检索图像。

问题是检索到的图像不是移动响应，我想让那些检索到的图像移动响应。当用户在移动设备上打开网站时，图像必须在彼此之下并且显示良好。

我尝试使用bootstrap，但是当在移动设备上打开网站时，图像不会互相影响

这就是我所拥有的：

<asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal">

    <ItemTemplate>
        <div class="col-xs-4 col-sm-4 col-md-4  " style="text-align: center;">
            <asp:Image ID="Image1" runat="server" Height="200px" Width="200px" ImageUrl='<%# "data:Image/png;base64," + Convert.ToBase64String((byte[])Eval("Logo")) %>' />
        </div>
    </ItemTemplate>

</asp:DataList>

-

SqlConnection con = new SqlConnection(
WebConfigurationManager.ConnectionStrings["MyDbConn"].ConnectionString);
con.Open();
SqlCommand command = new SqlCommand("Select * from [dbo].[tb_Stores]", con);

SqlDataAdapter adapter = new SqlDataAdapter(command); DataTable dtEmployees = new DataTable();
adapter.Fill(dtEmployees);

DataList1.DataSource = dtEmployees;

DataList1.DataBind();
con.Close();

请帮助我如何使所有图像检索到移动响应。

Answer 1

首先，您不能在响应式设计中使用较旧的ASP.NET控件，如Repeater，DataList，DataGrid，GridView，FormView，因为它们会自动创建表格。请尝试使用ListView。

接下来，尝试将class="img-responsive"应用于您的图片，如documentation。

中所述

此类主要应用样式max-width：100％;和身高：汽车;到图像，以便它很好地缩放以适应包含元素，否则如果图像宽度大于父元素的宽度，它可能会溢出并破坏您的布局。

此外，从图像中删除固定大小，并通过包含元素的％大小来控制它。 RWD中没有固定的大小。

使用引导程序从数据库检索图像时自动定位图像

1 个答案: