Horizontally centralized images in container, crop left / right if needed
I have multiple images inside a container and I would like the images to be centered horizontally when the browser is resized. Currently images are left aligned, like left: 0
I want them to overflow past the left and right edges if the container is narrower than the image. I thought it margin: 0 auto
would work. But it doesn't seem to be the case. This is basically 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;
}
+3
source to share
2 answers
The next trick will center the image horizontally, even if it requires pushing the left side out of 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 -->
+2
source to share
here is a violin for you; I think this is what you are looking for. http://jsfiddle.net/qo625xkb/
just added the 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 a full container, fill the center.
.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%;
}
0
source to share