Gibt es eine Möglichkeit, ein Bild auf die Größe% 300 zu bringen, wenn eine Taste gedrückt wird?/Fixed

Question

Ich benutze dieses Bild http://i.imgur.com/pmNyAzN.jpg aber wie Sie den Text sehen können, ist es nicht sehr sichtbar, also muss ich es zoomen. Ich habe mir einen Daumenkino-Effekt geliehen, um meine Seite zu erstellen, und ich frage mich, ob ich eine Schaltfläche erstellen kann, wenn sie gedrückt wird, um die Seite auf die Größe 300+ zu bringen, und wenn sie erneut gedrückt wird, um zurückzugehen.

Ich habe diese Demo http://www.vestigedayz.com/Lucius-Payne/ro/Capitolul1/Indisponibil/ (wie Sie auf Seite 2 sehen Sie den Text nicht mehr zu sehen ist)

Mein HTML:

<div class="flipbook-viewport"> 
    <div class="container"> 
     <div class="flipbook"> 
      <div style="background-image:url(pages/1.jpg)"></div> 
      <div style="background-image:url(pages/2.jpg)"></div> 
      <div style="background-image:url(pages/3.jpg)"></div> 
      <div style="background-image:url(pages/4.jpg)"></div> 
      <div style="background-image:url(pages/5.jpg)"></div> 
      <div style="background-image:url(pages/6.jpg)"></div> 
     </div> 
    </div> 
</div> 

Meine CSS:

.flipbook-viewport{ 
    overflow:hidden; 
    width:100%; 
    height:100%; 
} 

.flipbook-viewport .container{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:auto; 
} 

.flipbook-viewport .flipbook{ 
    width:922px; 
    height:600px; 
    left:-461px; 
    top:-300px; 
} 

.flipbook-viewport .page{ 
    width:461px; 
    height:600px; 
    background-color:white; 
    background-repeat:no-repeat; 
    background-size:100% 100%; 
} 

.flipbook .page{ 
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2); 
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.2); 
    -ms-box-shadow:0 0 20px rgba(0,0,0,0.2); 
    -o-box-shadow:0 0 20px rgba(0,0,0,0.2); 
    box-shadow:0 0 20px rgba(0,0,0,0.2); 
} 

.flipbook-viewport .page img{ 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    margin:0; 
} 

Answer 1

Sie können eine Schaltfläche mit einem Javascript onclick-Handler verwenden, der eine CSS-Klasse setzt. Dann könnten Sie css3 scale-attribute verwenden, wenn die set-Klasse vorhanden ist.