ResponsiveSlides如何使图像的宽度占据整个页面?

时间:2015-01-07 02:41:52

标签: javascript jquery html css responsive-slides

我想让图片的宽度与整个页面一样:

http://i1240.photobucket.com/albums/gg491/Nerio_Navea/Screenshots/GoogleChrome2014-12-30220149_zps99e94bc2.png

但是我找不到这个属性。

我是使用Jquery的新手,但我理解Javascript

请有人帮忙解决这个问题

我是StackOverflow的新手

对不起我的英文; D

2 个答案:

答案 0 :(得分:1)

我不知道您想要什么,但您可以将图片插入div,或使用float,以便您的图片可以超出正常的边距。

您可以尝试使用内嵌CSS:

<image src = " " style = "position: absolute; left:10; top: 100;">

只需在各自的位置写下左侧和顶部坐标,即可指定要放置图像的确切位置。这是我在阅读你的问题后得到的。

并且,通过这种方式,您可以使图像占据整个页面。

答案 1 :(得分:1)

如果您正在尝试制作响应式幻灯片,这可能会有所帮助。这是一个使用Javascript / HTML包含滑块幻灯片的示例。

  1. Javascript代码
  2. &#13;
    &#13;
    <!-- it works the same with all jquery version from 1.x to 2.x -->
    <script src="jquery.min.js"></script>
    <script src="jssor.slider.mini.js"></script>
    <script>
        jQuery(document).ready(function ($) {
            //Define an array of slideshow transition code
            var _SlideshowTransitions = [
            { code1 },
            { code2 },
            { code3 }
            ];
            var options = {
                $AutoPlay: true,
                $SlideshowOptions: {
                        $Class: $JssorSlideshowRunner$,
                        $Transitions: _SlideshowTransitions,
                        $TransitionsOrder: 1,
                        $ShowLink: true
                    }
            };
            var jssor_slider1 = new $JssorSlider$('slider1_container', options);
        });
    </script>
    &#13;
    &#13;
    &#13;

    1. HTML代码
    2. &#13;
      &#13;
      <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
          <!-- Slides Container -->
          <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
              <div><img u="image" src="image1.jpg" /></div>
              <div><img u="image" src="image2.jpg" /></div>
          </div>
      </div>
      &#13;
      &#13;
      &#13;