Question

我不是css设计师，但现在我必须使用css使我们的图像轮播对我们的网站做出响应。我首先在js小提琴中做它并且它正在工作。使用jsfiddle url如下http://jsfiddle.net/DelightedDoD/hx9jy3ne/5/

但是当我为我们的实时网站使用相同的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>

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

任何人都可以介意查看我的实时网站并向我推荐我的代码中缺少的内容。感谢

Answer 1

您忘记包含视口元标记：

.c

注意：<meta name="viewport" content="width=device-width, initial-scale=1">只是意味着最初加载网站时不会应用缩放。

Answer 2

两件事......

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

max-width: 100%;
height: auto;

2）正如其他人所说，您的网站没有响应。这意味着没有任何＆＃34;快速修复＆＃34;使旋转木马响应。轮播嵌套在具有固定宽度的其他元素中。如果包含图像轮播的元素不能变小，则轮播本身也不能（因为＆＃34;响应＆＃34;意味着缩放到父容器的大小）。正如其他人提到的，我立即看到的两个问题是min-width: 960px元素上的body。另一个问题是应用于实际轮播包装元素的固定宽度：.headerCarouselwrapper: width: 1280px;

轮播在小提琴中工作的原因是因为它没有包裹在任何设置为特定宽度的元素中。

响应式图像和护理问题CSS

2 个答案: