Как картинку растянуть на весь экран так что бы она ушла в право и в лево за области видимости?

Question

[igorstec]

картинки слайдера очень большие и мне нужно что бы они не ужимались или не уходили в право за область видимости а уходили ровными частями и в право и в лево... если бы я картинку вставлял через background-image проблем бы не было но это слайдер и я вставляю img src и тут мне удается только либо сжать картинку либо выпустить ее в право

тут три картинки
это на jsfiddle

две первые картинки сделаны через img src первая уходит в право, вторая ужимается.... а третяя сделана через background-image и мне нужен именно такой результат но через img src

<header>
  <img src="img/2.jpg" alt="">
</header>

<div><img src="img/2.jpg" alt=""></div>

<section> </section>

header {
  position: relative;
  overflow: hidden; 
  height: 100%;


}

img {
  height: 100%;
}

div {
    position: relative;
  overflow: hidden; 
  height: 100%;

}


div img {

width: 100%;
}

section {
  height: 948px;
    overflow: hidden;
  background-image: url(../img/2.jpg);
      background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0;
}

Answer 1

[A K]

jsfiddle.net/Symphony/y2xs54ds - способ реально повторяющий нужный эффект.
Разве предыдущие способы работают по аналогии background-size: cover?
Попрубейте посмотреть на большом мониторе, большем чем размер картинки.

Comments

[igorstec]

что-то я мучил ваш код и никак ( если у вас есть лишняя минутка был бы рад если бы вы глянули. спасибо в любом случае jsfiddle.net/y2xs54ds/2

Answer 2

[disillusion]

отцентрирует любой внутренний контейнер, который больше своего предка.

.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}

Comments

[igorstec]

супер... спасибо!!!!