Как реализовать turn.js на адаптивных изображениях

Question

Я изо всех сил пытаюсь реализовать turn.js библиотека на моих адаптивных изображениях. Я думал, что использовать библиотеки JS легко, но адаптировать библиотеку JS к коду разработчика кажется сложнее, чем ожидалось.

Я написал некоторый код, чтобы показать, как я хочу, чтобы конечный результат выглядел - есть некоторые #headings div с последующим #fbook Div, который содержит .fbookImg изображений. Чтобы сделать код менее запутанным и более читабельным для Вас, я решил добавить в него только одно изображение.

HTML:

<div id="headings">
</div>
<div id="fbook">
  <img class="fbookImg" src="http://oi67.tinypic.com/30ue0bp.jpg" />
</div>

CSS:

#headings {
  height: 100px;
  width: 100%;
  border: solid black 1px;
}

#fbook {
  width: 100%;
  border: dashed blue 1px;
}

.fbookImg {
  height: 100%;
  width: auto !important;
  max-width: 100%;
  position: relative;
  display: block;
  margin: 0 auto;
}

В разделе JS у меня есть код, чтобы сделать изображения более отзывчивыми

JS (turn.js и jQuery уже связаны):

$(document).ready(function() {
    var a = window.innerHeight - 100;
    $('#fbook').css('height',a);
});

$(window).resize(function(){
    var b = window.innerHeight - 100;
    $('#fbook').css('height',b);
});

К вашему сведению, это скрипка / кодовая ручка: http://codepen.io/Janos/pen/wdwzVK

---

Я пытался поставить больше .fbookImg изображения в #fbook див...

<div id="fbook">
  <img class="fbookImg" src="http://oi67.tinypic.com/30ue0bp.jpg" />
  <img class="fbookImg" src="http://oi66.tinypic.com/jkk13o.jpg" />
</div>

... и положить туда соответствующий turn.js код в соответствии с примером на их официальном сайте...

$("#fbook").turn({
    display: "single",
    autoCenter: true
});

... НО конечный результат ( скрипка здесь) далек от того, что я хотел, он, кажется, не соответствует моему стилю по умолчанию и никакого эффекта не применяется.

Answer 1

Я бы пошел на 5-й версии turn.js

Они также лучше поддерживают отзывчивость! Проверьте это!

Как решить вашу проблему:

Получить height а также width из element где твой img должен быть показан в и применить его к вашему img! Вы также можете сделать это как background-image описано здесь, чтобы соответствовать внешнему element!