Question

所以我的图像超出了屏幕，因为我想要一个全屏幻灯片，我想知道如何摆脱水平滚动条..？

            <div class="fadein">
<head>

    <meta charset="utf-8" />
    <title> Iamdrivingtoday.com </title>
    <link rel="stylesheet" href="mfcc.css">

<script src="jquery-1.11.1.min.js"></script>
<script src="JqueryPlugins/jquery.vegas.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.vegas.min.css"></link>
<style type="text/css">
<!--
#html{
    overflow:hidden;
}
#fadein {
    position: relative;
    width: 100%;
    height: 100%
}

#fadein img {
    position:absolute;
    left:0;
    top:0;
}


-->
</style>


</head>

你可以看到宽度是1500，我想保持这种方式，所以我如何摆脱水平滚动条？

<body>
        <div id="big_wrapper">
            <header id="top_header">
                <img src="iadt.jpg" height="100" width="300"> </img>
            </header>

            <center><nav id="top_menu">
                    <ul>
                        <li><a href="Iamdrivingtoday.com/Home">Home</a></li>
                        <li><a href="Iamdrivingtoday.com/Application">Application</a></li>
                        <li><a href="Iamdrivingtoday.com/Privacy Policy">Privacy Policy</a></li>
                        <li><a href="Iamdrivingtoday.com/ContactUs">Contact Us</a></li>
                    </ul>
            </nav>  </center>

                <div class="fadein">
    <img src="images/slide1.jpg" width=1500 height=308 style="position: absolute; left: -125px;">
    <img src="images/slide3.jpg" width=1500 height=308 style="position: absolute; left: -125px;">
    <img src="images/slide.jpg"  width=1500 height=308 style="position: absolute; left: -125px;">   

</div>

<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();

setInterval(function () {
    $('.fadein :first-child').fadeOut()
                             .next('img')
                             .fadeIn()
                             .end()
                             .appendTo('.fadein');
}, 4000); // 4 seconds
$.vegas('next');
});
</script>

Answer 1

只需将其添加到您的包含类

即可

.fadein{
   overflow: hidden;
}

那将有效

Answer 2

这是因为您要将样式添加到图像类，您需要将溢出添加到具有该图像的容器中，这是一个越来越大的容器

Answer 3

我会移除图片上的style和width属性;每张图片都是这样的：

<img src="images/slide1.jpg" class="slide-image"/>

然后在我的 CSS

中添加定义类

.slide-image{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#fadein {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

<强>已更新添加小提琴：http://jsfiddle.net/eYp7F/

Answer 4

试试这个：

body {
    overflow:hidden;
}

<强> JSFiddle Demo

<强>更新

使用*，html或body来隐藏overflow通常是一个坏主意，但这应该会隐藏页面中的水平和垂直滚动条。

我会改为：

*{
    padding:0;
    margin:0;
}
.fadein {
    position: absolute;
    overflow:hidden;
    height:100%;
    width:100%;
}
.fadein img{
    position:absolute;
    left:0;
    top:0;
}

请避免使用内联样式。

<强> JSFiddle Demo

Answer 5

删除img标签中的style属性，因为您应该使用CSS设置图像的样式。你的img标签应该是：

<img src="images/slide1.jpg" width="1500" height="308" />

.fadein{ overflow:auto;} img { width: 100%;}

当我的图像超出页面时，如何摆脱水平滚动条？

5 个答案: