8
votes

Fixez la taille de l'image sans réimaginer

J'ai un div qui est largeur: 500px; et hauteur: 170px;

Le DIV contient un diaporama jQuery qui obtient des images aléatoires de ma base de données et les affiche.

Problème est que les images sont téléchargées par les utilisateurs et peuvent être n'importe quel rapport rapport-rapport / n'importe quelle taille .

J'ai besoin des images pour adapter le div sans être redimensionné à l'aide de xxx

essentiellement, je veux que toutes les images soient affichées Correction et en qualité de correction acutale.

Je ne veux pas restreindre les tailles d'images pouvant être téléchargées telles qu'elles sont affichées dans d'autres parties du site en taille / qualité complète.

Est-ce que vous pouvez fournir une solution?


0 commentaires

4 Réponses :


8
votes

Vous pouvez utiliser CSS pour définir la taille des images dans le diaporama sans modifier nécessairement le rapport de format de l'image.

  • Définissez la hauteur de l'image sur la hauteur du récipient de diaporama

  • Faites de la largeur automatique de sorte qu'il maintient son rapport de format

  • Définissez une max-largeur afin qu'il n'atteigne pas plus large que le diaporama xxx

    Remarque Les images peuvent être plus minces que le diaporama si la taille d'origine est petite.


0 commentaires

5
votes

Vous devriez pouvoir utiliser la propriété max-largeur de CSS CODE>. Vous ne voudrez pas spécifier la largeur ou la hauteur si vous faites cela.

Votre HTML: P>

#yourContainer {
    width: 500px;
    height: 170px;
}

#yourContainer img {
    max-width: 100%;
    max-height: 100%;
}


0 commentaires

3
votes

J'ai compris comment accomplir l'image redimensionner le rapport de l'image et centrer l'image avec un simple morceau de code CSS comme suit: xxx

espère que cela aident quelqu'un :) < / p>


0 commentaires

0
votes

Utilisez la combinaison ci-dessous de la hauteur et de la largeur xxx


0 commentaires