Existe-t-il un moyen de redimensionner les images selon qu'elles sont verticales ou horizontales en utilisant cycle2?

Je souhaite redimensionner l'image pour que l'image entière soit toujours visible sans barres de défilement. Les images de paysage devraient aller jusqu'aux bords, tandis que les images verticales devraient avoir une marge sur le côté, et toutes les images devraient être centrées.Existe-t-il un moyen de redimensionner les images selon qu'elles sont verticales ou horizontales en utilisant cycle2?

Toutes les images ont des hauteurs et des largeurs légèrement différentes. Je suis en train de tester avec seulement 4 photos, mais j'ai l'intention d'ajouter plus tard.

C'est ce que j'ai jusqu'à présent:

... 
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 
<script src="js/jquery.cycle2.min.js"></script> 
<style type="text/css"> 
    * { 
    padding: 0; 
    margin: 0; 
    } 

    body { 
    font-family: sans-serif; 
    display: block; 
    max-height: 100%; 
    } 

    img { 
    max-width: 100%; max-height: 100%; margin: 0; 
    } 

    .cycle-slideshow { 
    max-width: 100%; 
    max-height: 100%; 

    } 
</style> 

<body> 
    <div class="cycle-slideshow"> 
    <img src="photos/NYC_Skyline_Revised.jpg" alt="NYC Skyline Photo"> 
    <img src="photos/MinionDrawing-1.jpg" alt="NYC Skyline Photo"> 
    <img src="photos/NYC_Skyline_Daytime.jpg" alt="NYC Skyline Photo"> 
    <img src="photos/HeavenlySunrise-2.jpg" alt="Sunrise Photo"> 
    </div> 
    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
</body> 
...

Source

2017-07-26 Tirth Rami

1) vérifier si la largeur est supérieure à la hauteur

How to get image size (height & width) using JavaScript?

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG 
var width = img.clientWidth; 
var height = img.clientHeight;

2) Soit

How do I auto-resize an image to fit a div container

max-width:100%; 
max-height:100%;

ou même que ci-dessus pour la largeur de% désirée pour non paysage

You can use jQuery comme $(element).css("width", "100%"); d'aller à 100% la largeur du conteneur ou navigateur w/e

Source

2017-07-26 23:11:58 lloyd

Existe-t-il un moyen de redimensionner les images selon qu'elles sont verticales ou horizontales en utilisant cycle2?

Répondre

Questions connexes