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

Posted 2023-03-06

【中文标题】使用引导程序从数据库中检索图像时自动定位图像

【英文标题】：Position images automatically when retrieving images from database by using bootstrap

【发布时间】：2018-08-04 23:43:28

【问题描述】：

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

问题是检索到的图像不是移动响应的，我想让这些检索到的图像具有移动响应性。当用户在移动设备上打开网站时，图像必须彼此下方并很好地显示。

我尝试使用引导程序，但是当在移动设备上打开网站时，图像不会相互叠加

这就是我所拥有的：

<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();

请帮助我如何使检索到的所有图像都具有移动响应能力。

【参考方案1】：

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

接下来，尝试按照documentation 中的说明将class="img-responsive" 应用于您的图像。

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

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

【讨论】：

我使用了 ListView。谢谢