超大屏幕设备上的全宽横幅尺寸（宽度>1366px）答案

【问题标题】：full width banner size on extra large screen device (width>1366px)超大屏幕设备上的全宽横幅尺寸（宽度>1366px）
【发布时间】：2018-10-24 19:56:17
【问题描述】：

HTML

    <div class="container-fluid no-padding">
    <div id="mainSlide" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#mainSlide" data-slide-to="0"></li>
      <li data-target="#mainSlide" data-slide-to="1"></li>
      <li data-target="#mainSlide" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner img-responsive">
      <div class="item active">
        <img src="1.jpg" alt="nature1">
      </div>
      <div class="item">
        <img src="2.jpg" alt="nature2">
      </div>
      <div class="item">
        <img src="3.jpg" alt="nature3">
      </div>
      <a class="left carousel-control" href="#mainSlide" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#mainSlide" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

CSS

.no-padding{
  padding: 0px;
}
.item {
  height: 100%;
  width: 100%;
}

问题

从横幅中可以看出，它在大屏幕上显示异常，如何解决。在小屏幕 (

【问题讨论】：

也许使用 object-fit:fill ？
或者添加类 img-responsive 并使用 css media-queries
您的网站上线了吗？如果可以，可以分享一下链接吗？
还没有@Matt，这实际上是我侄女的一个小型大学项目。我已经添加了对轮播类的 img-responsive（第 8 行）。

标签： css html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

最好使用类将width: 100% 添加到<img>。

这是我的代码笔：https://codepen.io/CodeBoyCode/pen/jeQOmG

如果这不是你想要的，请告诉我

【讨论】：

css 选择器例如可以是.item img。
这是真的^^^
@CodeBoyCode 确实这是我所缺少的，我认为图像会缩放到它的前一个容器是错误的。