web-dev-qa-db-fra.com

Comment définir une largeur maximale en pourcentage ET en pixels?

Comment puis-je empêcher la largeur d'une div de s'étendre au-delà d'un pourcentage ET d'un pixel? En d'autres termes, le navigateur doit calculer la valeur en pixels du pourcentage, puis choisir la plus petite des deux valeurs.

Si je devais les définir comme suit: {max-width:100px;max-width:20%;}, le pipeline d'actifs choisirait simplement le second et ignorerait le premier.

htmlcsscss3asset-pipeline
32
Joe Morano
width:20%;
max-width:100px;

Cela règle la largeur à 20% mais le plafonne à 100 px.

33
JJJ

Une façon d'accomplir ceci est d'utiliser simplement deux divs

<div class="outer">
  <div class="inner">
    This content will not exceed 100px or 20% width.
  </div>
</div>

<style>
.outer {
  max-width: 90%;
}
.inner {
  max-width: 100px;
}
</style>
18
Jason Axelson

Ceci PAS fonctionnera avec différentes tailles/formats d'image. Vous pouvez définir max-width et max-height séparément, si vous connaissez la taille des images. Utilisez cette méthode pour un groupe d'images spécifique, mais pas en règle générale.

Exemple pratique: vous avez 5 photos de votre téléphone à placer dans une page et vous avez besoin de texte dans l'autre moitié de l'écran. Vous réduisez la taille des images à 500 pixels de large et 300 pixels de haut. Vous voulez qu’ils ne dépassent pas la moitié de l’écran et ne dépassent pas 250 pixels sur la tablette. Calculez la hauteur maximale: 250 * 300/500 = 150px.

.img-class {
    max-width: 50%;
}
@media (max-width: 800px) {
    .img-class {
       max-height: 150px;
    }
}

Testé sur les derniers Chrome, Firefox et IE.

7
Kiaurutis

J'ai eu un problème spécifique qui nécessitait une solution similaire. J'avais besoin d'afficher toutes les images (indépendamment du format, de la position ou du balisage HTML supplémentaire) à leur taille originale, jusqu'à une largeur maximale définie en pixels. Si l'écran est plus petit que cette taille fixe, il devrait rétrécir pour s'adapter. C'est à dire. définir une width ne satisferait pas les exigences.

Pour développer la réponse de @Kiaurutis:

img {
  max-width: 400px;
}

@media (max-width: 400px) {
  img {
    max-width: 100%;
  }
}

Un exemple de travail peut être vu ici: https://jsfiddle.net/vrehxmpx/ . Dans cet exemple, il existe une image supérieure à 400 px (toujours réduite) et une image inférieure au seuil (réduite uniquement lorsque l'écran est plus petit que l'image).

Pour ajuster les marges, les bordures et d’autres éléments de l’image, il suffit d’augmenter le @media du max-width.

2
Druckles

Ne fais pas ça.

Je crois que la réponse choisie est correcte pour le scénario décrit par le PO. Cependant, certains commentaires affirment que l'OP a demandé de définir la propriété max-width sur la plus petite des deux valeurs, et non sur width. Cela aussi peut être fait, s'il vous plaît voir ci-dessous.

Remarque: Cette solution n'a pas beaucoup de sens pour moi. S'il vous plaît utiliser la réponse sélectionnée, il montre correctement pourquoi max-width a été créé. Le code ci-dessous garantira que la propriété max-width est la moindre des valeurs suivantes: 20% ou 100 pixels.

img {
    max-width: 20%;
}

@media (min-width: 500px){ /* at 500 pixels, 20% of the width will be 100px */
    img {
        max-width: 100px;
    }
}
0
Aaron Cicali

J'ai eu la même largeur "page wrap" sur mon site. Je voulais que ce soit 95% largeur par défaut mais pas plus de 1280px. voici comment je l'ai fait avec CSS

.wrap{max-width:95%;margin:0px auto;}
@media screen and (max-device-width:1280px),screen and (max-width:1280px){.wrap{max-width:1280px;margin:0px auto;}}
0
Ph Abd