Lightbox - Est-il possible de forcer redimensionner l'image?

Quelqu'un sait comment faire pour forcer le redimensionnement de l'image qui s'ouvre dans la visionneuse soit en CSS ou en piratant lightbox?

Je sais que c'est pas une bonne solution pour avoir une taille d'image fixe (ce qui devrait être fait au téléchargement), mais c'est un besoin spécifique d'un client.

Grâce.

OriginalL'auteur Probocop | 2010-03-01

  1. 1

    C'est pas une mauvaise solution ayant une taille fixe. Juste mettre le max-height et max-largeur (en CSS) pour n'importe quoi (mais pas les deux)- L'image sera alors échelle correctement.

    Mais toutes les images doivent être au même format, autrement hauteur /largeur peut varier.

    Et si vous définissez la taille fixe dans le CSS (largeur, hauteur), puis les images seront scewed.

    Salut, Merci pour votre réponse. J'ai essayer de jouer avec le css, le problème que j'avais était que certains largeurs sont mis en ligne. Le fait aussi qu'il n'est pas seulement la taille de l'image qui a besoin de cadre, son tous les récipients trop.
    Au final, j'ai mis un max-width et max-hauteur en CSS qui a résolu le problème, Merci.
    Pour du css de l'élément?

    OriginalL'auteur Steven

  2. 4

    Ajouter à css:

    #lightbox-container-image img { width:auto; max-height:520px; }

    OriginalL'auteur Sujay sreedhar

  3. 3
    <style>
    .lb-outerContainer { max-width:690px; max-height:520px; }
    .lb-image{ width:500px; max-height:500px;}
</style>

    OriginalL'auteur pradeep

  4. 1

    Dans votre CSS, vous pouvez avoir la taille de l'image ajuster pour remplir la largeur maximale tout en conservant le même rapport d'aspect comme ceci:

    img {width:100%; height:auto}

    Tant que le conteneur est un bloc, cela devrait régler la taille de l'image. Être conscient qu'elle peut regarder pixelisés dans les navigateurs plus anciens, parce que l'image convertisseur utilisé dans les navigateurs s'appuie sur des "plus proche voisin" de l'échantillonnage à l'échelle les images.

    OriginalL'auteur JP Silvashy

  5. 0

    Plutôt que d'utiliser des css, il suffit de les redimensionner l'image à l'aide de jquery largeur() et hauteur() des méthodes sur l'élément de l'image.

    Avant de le faire je vous recommande de diviser l'un par l'autre pour obtenir le rapport, afin de ne pas déformer l'image! 🙂

    OriginalL'auteur Alex Weber

  6. 0

    J'ai utilisé ce code avec slimbox2:

    #lbImage {

    width:320px;
    height:240px;
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    -moz-background-size: cover;

}

    OriginalL'auteur Fábio N Lima

  7. 0

    Trouver dans ces lignes jquery.colorbox.js

    photo.style.width = photo.width+200 + 'px';
photo.style.height = photo.height + 'px';

    et de le remplacer avec

    photo.style.width = photo.width+200 + 'px';
//photo.style.height = photo.height + 'px';

    enlever l'image de taille et d'augmenter la largeur de l'image à l'aide de + signe.

    OriginalL'auteur Joozy