[英]Extend image 100% width beyond parent
So I'm trying to extend these slideshow images beyond the parent element of the container which is 1024px. 所以我试图将这些幻灯片图像扩展到容器的父元素1024px之外。 I've tried setting max-width:100% to both the img selector, inline styling,etc.
我尝试将img选择器,内联样式等都设置为max-width:100%。 I can easily get the image 100% width but then that also sets the container to 100% which I don't want.
我可以轻松地将图像的宽度设置为100%,但是这也将容器设置为我不想要的100%。 I want the container element to remain the same, but only make the image 100% of the container.
我希望容器元素保持不变,但只使图像成为容器的100%。
JSFiddle: http://jsfiddle.net/schermerb/tK6H9/1/ 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;
}
Alright, so some small changes were done. 好了,所以做了一些小的更改。
To prevent scrolling from the big image: 为了防止从大图像滚动:
body {
overflow-x: hidden;
}
To have the image the size you want: 要获得所需大小的图像:
.slider img {
width: 1900px;
height: 475px;
left:50%;
margin: 0 auto;
margin-left: -950px;
position: absolute;
}
And finally, add overflow:visible;
最后,添加
overflow:visible;
on .slider
, to avoid the images from being cut on your prototype. 在
.slider
,以避免图像在您的原型上被剪切。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.