响应图像和Carousel问题CSS

我不是css设计师，但现在我必须让我们的图像旋转木马响应我们的网站使用css。我先用js fiddle来做，它正在工作。按如下方式使用JSFIDLE url

但是，当我在我们的直播网站上使用相同的css时，我注意到当屏幕宽度或高度改变时，没有响应。我只是复制这个代码和css

<style type="text/css">
.myImgs {
    width:100%;
    position:absolute;
    top:0;
    left:0;
}
.headerCarouselwrapperOuter {
    width:100%;
    position:relative;
  background-color:#000000;
}
</style>

<div itemscope itemtype="http://schema.org/WPHeader" role="banner" id="main_header_big2" style="width:100%">
    <div class="headerCarouselwrapperOuter" style="width:100%">
        <div class="headerCarouselwrapper">

<!--    <img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image1.jpg" />-->
            <img src="../images/new-bba-header-image1dyna.jpg" class="myImgs" />
            <img src="../images/new-bba-header-image2dyna.jpg"  class="myImgs" />
            <img src="../images/new-bba-header-image3dyna.jpg"  class="myImgs" />
            <img src="../images/new-bba-header-image4dyna.jpg"  class="myImgs" />
            <img src="../images/new-bba-header-image5dyna.jpg"  class="myImgs" />
            <img src="../images/new-bba-header-image6dyna.jpg"  class="myImgs" />
<!--      <img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image2.jpg" />
    <img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image3.jpg" />
    <img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image4.jpg" /> -->
        </div>
    </div>

myImgs先生{
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
}
.headerCarouselwrapperOuter{
宽度：100%；
位置：相对位置；
背景色：#000000；
}

我的实时网站url是www.bba-reman.com

---

任何人都可以查看我的实时站点，并向我建议代码中缺少的内容。谢谢您忘记了包含视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

注意：

初始缩放

仅仅意味着在站点初始加载时不会应用缩放。

两件事

1） 您旋转木马中的图像需要响应，这可以使用以下css（我在您的小提琴中没有看到，但我在您的实时站点上看到了）：

2） 正如其他人所说，您的网站没有响应。因此，这意味着不会有任何“快速修复”使旋转木马响应。转盘嵌套在具有固定宽度的其他图元中。如果包含图像转盘的元素不能变小，转盘本身也不能变小（因为“响应”意味着缩放到父容器的大小）。正如其他人提到的，我马上看到的两个问题是

body

元素上的

minwidth:960px

。另一个问题是应用于实际转盘包装器元素的固定宽度：

旋转木马在小提琴中工作的原因是它没有被任何设置为特定宽度的元素包裹。
如果我添加视口元标记，那么我的代码会工作吗？我有疑问。你是否介意看看我的网站html结构，因为我想我必须添加更多的css来处理这个问题……你怎么想。thanksI很快检查了你的网站，但没有深入讨论它是否是“设置”以响应，我只是注意到你丢失了viewport meta标记，这是一个被遗忘的经典标记。它不是一根魔杖，它可以让你的网站自动响应，但如果没有它，即使你的代码设置为响应，移动设备将不会相应地显示。我添加了您建议的元标记，但输出是相同的………图像在旋转木马中没有响应。只需查看我的JSFIDLE代码，该代码在向div和图像标记添加一些css后有响应……。我对我们的live web站点做了相同的操作，但该技巧对我们的live web站点不起作用……。我肯定是这样遗漏了一些东西。我愿意帮助我。thanksIt看起来不像你的网站是流动的，或者它对不同的视口使用任何媒体查询。。。看看这篇关于响应性设计的介绍文章：你的网站没有响应性，你使用了几个固定宽度等等。“langarth.grid.css”中的第一条规则是
body{min width:960px；overflow:hidden；}
猜猜你的站点的最小宽度是多少……如果有人能指导我如何使我的站点的图像旋转木马响应，那就足够了。谢谢告诉我我需要在html和css中更改什么？我是否应该将headerCarouselwrapper的宽度设置为100%，而不是1280px？此代码
max width:100%有何意义；高度：自动在哪里添加此代码？
max-width: 100%;
height: auto;