Horizontally center wide images in container, crop left/right if necessary - html

Question

I have several images inside a container and I would like the images to be centered horizontally when the browser is resized. Currently, images align with the left edge like left: 0, I want them to overflow outside the left and right edge if container is narrower than the image. I thought margin: 0 auto would work. But it seems it doesn't. Basically this is what I want:
HTML:
<div class="container-fluid main-slide">
<div class="mask"></div>
<div class="cycle-slideshow" style="position: relative;">
<img src="/img/1.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
<img src="/img/2.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
<img src="/img/3.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
<img src="/img/4.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
</div>
</div>
CSS:
.main-slide{
height:520px;
width:100%;
max-width:1920px;
padding:0;
margin:0 auto;
overflow:hidden;
position: relative;
}
FIDDLE

Answer 1

The following trick will center an image horizontally even if that requires pushing the left side outside the container.
.cycle-slideshow {
position: relative;
/* for testing */
margin: 0 auto;
border: 10px solid #FC0;
width: 200px;
height: 200px;
}
.cycle-slideshow img {
position: absolute;
top: 0;
/* fill vertically */
width: auto;
height: 100%;
/* center horizontally */
left: -1000px;
right: -1000px;
margin-left: auto;
margin-right: auto;
/* for testing */
z-index: -1;
}
<div class="container-fluid main-slide">
<div class="cycle-slideshow">
<img src="http://dummyimage.com/800x200/000/fff">
<img src="http://dummyimage.com/600x200/000/fff" style="display: none;">
<img src="http://dummyimage.com/400x200/000/fff" style="display: none;">
<img src="http://dummyimage.com/200x200/000/fff" style="display: none;">
</div>
</div>
<!-- cycle plugin will cycle the images one by one -->
Updated Fiddle that uses cycle plugin

Answer 2

here's a fiddle for you; I think this is what you're looking for. http://jsfiddle.net/qo625xkb/
just added a slide class to your imgs. and...
<div class="container-fluid main-slide">
<div class="mask"></div>
<div class="cycle-slideshow" style="position: relative;">
<img class="slide" src="http://placekitten.com/g/200/300" />
<img class="slide" src="http://placekitten.com/g/200/300" />
<img class="slide" src="http://placekitten.com/g/200/300" />
<img class="slide" src="http://placekitten.com/g/200/300" />
</div>
took a different approach with the full container, center fill.
.main-slide{
height:520px;
max-width:1920px;
padding:0;
overflow:hidden;
position: relative;
border: 2px solid green;
}
.slide {
position: absolute;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
margin-left: 50%;
margin-top: 50%;
}