将div宽于屏幕对齐为中心和隐藏溢出

Question

I want to make slideshow which wider than monitor screen.

Below codes is if the div smaller than screen:

The HTML:

<div class="testme">
  <img src="http://placehold.it/400x300">
</div>

The CSS:

html,body{
    padding:0;margin:0;
}

.testme{
    width:400px;height:300px;
    margin-left: auto;
    margin-right: auto;
}

But if the img width wider than monitor screen, I must remove width in CSS to make overflow works. But width is important for align center.

Use margin-left: -50% do aligning it but not exactly centered

(Most slider I know use html img and not background, which is problem if I want the slider wider than screen)

Answer 1

I would try:

img {
    width: 120%;
    height: auto;
    margin-left: -10%; /*half of width surplus*/
}

Answer 2

not sure if it ll help you.. but in case you just want to make the image at the center of the div.. u can put the image in background property of the div and position it to center.. u don't need to worry about margin or anything.. if the div increases in size according to screen where ur viewing ..it ll readjust to best case center..

.testme {
background: url('..src of image tag');
background-position:center;
}

in case you need it for the slideshow.. you can always dynamically add the background property to the div tag and remove the image tag from the div. :) hope it helps..