Kentico中的Bootstrap Carousel - 移动图片

Question

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

有什么好办法吗？

<div class="item <%# Eval("HomeSliderActive")%>">
    <img  src="<%# Eval("HomeSliderImage") %>" alt="<%# Eval("HomeSliderHeading")%>" class="img-fluid "/>
       <div class="carousel-caption no-mobile headings">
        <a href="<%# Eval("HomeSliderURLTarget") %>">
          <div class="outer">
            <div class="inner-absolute-top">
              <h3><%# Eval("HomeSliderHeading")%></h3>
            </div>
            <div class="inner-absolute-bottom">
              <p><%# Eval("HomeSliderCaption")%> <span><%# Eval("HomeSliderButton")%></span></p>
            </div>
          </div>  </a>
          </div>
      </div>

Answer 1

你有几个选择。

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

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

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

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