javascript - 将图像扩展到父级之外的 100% 宽度

Question

所以我试图将这些幻灯片图像扩展到 1024 像素的容器的父元素之外。我已经尝试将 max-width:100% 设置为 img 选择器、内联样式等。我可以很容易地获得 100% 宽度的图像，但是这也会将容器设置为 100%，这是我不想要的。我希望容器元素保持不变，但只使图像成为容器的 100%。

JSFiddle:http://jsfiddle.net/schermerb/tK6H9/1/

<div class="main-inner">
    <div class="slider">
        <img alt="" src="images/slide1.jpg" />
        <img alt="" src="images/slide2.jpg" />
        <img alt="" src="images/slide4.jpg" />
    </div>
</div>

.main-inner {
    position: relative;
    width: 1024px;
    height: 475px;
    margin: auto;
}
.slider {
    width: 100%;
    height: 475px;
}
.slider img {
    width: 100%;
    height: 475px;
    margin: 0;
    position: absolute;
}
/* SLIDER CONTAINER */
 .slider-container {
    width: 1024px;
    margin: auto;
    height: 475px;
}
.previous-btn, .next-btn {
    position: absolute;
    top: 200px;
    width: 35px;
    height: 60px;
    margin: auto;
}
.previous-btn {
    left: 0;
    background: url(images/prev.png);
}
.next-btn {
    background: url(images/next.png);
    right: 0;
}
/* PAGiNATION */
 .pagination {
    position: absolute;
    top: 450px;
    right: 6px;
    margin: auto 0;
    padding: 0;
}
.pagination li {
    list-style: none;
    float: left;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    position: relative;
}
.pagination li a {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    text-indent: -9999px;
    display: block;
    opacity: 10;
}
.pagination li.current-pagination a, .pagination li a:hover {
    opacity: 0.9;
    background: #00a1f1;
}

Answer 1

好的，所以做了一些小改动。

防止从大图滚动:

body {
    overflow-x: hidden;
}

要使图像具有您想要的大小:

.slider img {
    width: 1900px;
    height: 475px;
    left:50%;
    margin: 0 auto;
    margin-left: -950px;
    position: absolute;
}

最后，在 .slider 上添加 overflow:visible;，以避免原型(prototype)上的图像被剪切。

FIDDLE