9阅网

您现在的位置是:首页 > 知识 > 正文

知识

bootstrap-4 - Kentico中的Bootstrap Carousel - 移动图片

admin2022-11-03知识15

我有一个Bootstrap Carousel在Kentico CMS中运行得很好,除了移动视图。尽管添加了img-fluid的标签,但移动端图片只是桌面端banner的缩小版。 我真正想做的是为小屏幕添加一个单独的图片。

有什么好办法吗?

<divHomeSliderActive")%>">
    <img  src="<%# Eval("HomeSliderImage") %>" alt="<%# Eval("HomeSliderHeading")%>"/>
       <div>
        <a href="<%# Eval("HomeSliderURLTarget") %>">
          <div>
            <div>
              <h3><%# Eval("HomeSliderHeading")%></h3>
            </div>
            <div>
              <p><%# Eval("HomeSliderCaption")%> <span><%# Eval("HomeSliderButton")%></span></p>
            </div>
          </div>  </a>
          </div>
      </div>


【回答】:

你有几个选择。

  • 在第10版中,他们引入了一个响应式图像模块。 这允许用户上传一张图片(通常是最大的,最好的一张),然后你写的代码会根据你的网站设计创建特定的图片。https:/docs.kentico.comk12developing-websitesmanaging-responsive-images。

  • 在页面类型定义上,增加桌面、平板和手机的多个字段,并在代码中添加。

  • 让用户上传优化后的大图片,并使用单张图片。

  • 用JavaScript预加载或懒加载图片。