Combiner deux règles max-width avec des unités différentes

**SylvainPV** · 21/11/2013, 20h49

Bonjour,

J'ai un élément image dont je connais pas à l'avance la taille. Je ne spécifie pas d'attribut width ou height pour qu'elle garde sa taille d'origine. Mais je ne veux pas qu'elle occupe plus d'un tiers de la largeur de mon conteneur parent, donc j'ai ajouté la règle max-width: 33%. Jusqu'ici tout va bien.

Là où je bloque, c'est si maintenant je souhaite que mon image n'occupe pas plus de 320 pixels ET pas plus de 33%. En somme, je veux combiner deux règles max-width avec des unités différentes.

J'y suis parvenu avec JavaScript:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<img src="https://www.google.fr/images/srpr/logo11w.png"
onload="this.style.maxWidth = Math.min(320,Math.floor(this.parentNode.offsetWidth/3))+'px';"/>

Mais je voudrais savoir s'il existe une solution en CSS uniquement. Des idées ?

**Candygirl** · 22/11/2013, 08h17

Hello,

En principe, un width de 320px associé à un max-width de 33% devrait te donner l'effet souhaité.

**Bovino** · 22/11/2013, 08h29

Non... pas vraiment Candy, car s'il met un width: 320px;, l'image sera agrandie si elle est plus petite à la base, ce que Sylvain ne souhaite pas.

Sylvain, je ne vois pas de solution en CSS pour faire ça... JavaScript me semble la seule façon d'y parvenir.

**Candygirl** · 22/11/2013, 08h33

ah oui juste, j'avais bêtement pas pensé aux images plus petites que 320; merci

pas bien réveillée ;p

J'ai un élément image dont je connais pas à l'avance la taille.

Tu n'as pas moyen, côté serveur, de détecter les images >320px ?

**NoSmoking** · 22/11/2013, 19h17

Bonjour,
après la fonction CSS3 calc() il y lourd à parier que les fonctions min() et max() verront le jour.
En attendant le javascript me semble effectivement la solution la plus pérenne.

**Bovino** · 23/11/2013, 09h18

NoSmoking, j'ai bien pensé aussi à calc(), mais cette fonction permet d'effectuer, comme son nom le laisse supposer, des calculs, pas des comparaisons et ne sera donc pas utile ici...

**NoSmoking** · 23/11/2013, 14h27

Je suis bien d'accord avec toi mais ce n'était pas le sens de ma réponse qu'il faut interpréter comme suit

Envoyé par autre façon

comme ils ont intégré la fonction calc()...ils intégreront bien un jour les fonctions min() et max().

PS: d'ailleurs je ne sais pas pourquoi je n'ai pas écris cela tout de suite!

**SylvainPV** · 23/11/2013, 15h10

D'accord, c'est bien ce que je craignais. Le problème avec la solution JavaScript, c'est que la valeur 33% est convertie en pixels au chargement et ne s'adaptera pas aux changements de taille futurs de la page. Ou alors il faut que je me branche sur l'évènement "resize" de window. Fastidieux tout ça...

J'ai eu une autre idée : encapsuler le tag image par une <div> wrapper avec cette même image en background et la propriété background-size: cover;. Puis appliquer une règle max-width sur l'image et la deuxième sur la div. Mais ça n'a pas l'air de bien marcher :
Démo JSFiddle

Ou alors c'est moi qui ne comprend pas la spécification de background-size:cover

**Candygirl** · 23/11/2013, 21h50

Si tu peux jouer avec les imbrications, tu peux essayer qqch du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
div {
	max-width:33%;
}
 
span {
	display:block;
	max-width:320px;
}
 
img {
	max-width:100%;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div><span><img src="https://www.google.fr/images/srpr/logo11w.png" /></span></div>

**NoSmoking** · 23/11/2013, 22h45

Une approche proche de celle de notre Candygirl.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
#conteneur_parent{
  border:1px solid black;
}
#div_image {
  width:33.3%;
  background:#FEF;
}
 
#div_image img {
  width:100%;
  max-width:320px;
}
</style>
</head>
<body>
<div id="conteneur_parent">
  <div id="div_image">
    <img src="https://www.google.fr/images/srpr/logo11w.png" />
  </div>
</div>
</body>
</html>

pour ton exemple "fiddle" j'aurais plus testé avec le CSS suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#wrapper {
  background: url("https://www.google.fr/images/srpr/logo11w.png") no-repeat center;    /* exit le fixed */
  -webkit-background-size: contain; /* pour Chrome et Safari */
     -moz-background-size: contain; /* pour Firefox */
       -o-background-size: contain; /* pour Opera */
          background-size: contain; /* version standardisée */
}

mais cela ne règle pas le problème sur le max à 320px.

**Candygirl** · 24/11/2013, 09h35

Il me semble que ton code pose le même problème que ma première suggestion avec les images plus petites que 320...

Par contre en appliquant width de 33% max-width de 320px sur le div, cela devrait le faire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
div {
	width:33%;
	max-width:320px;	
}
 
 
img {
	max-width:100%;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div><img src="https://www.google.fr/images/srpr/logo11w.png" /></div>

**NoSmoking** · 24/11/2013, 11h05

Il me semble que ton code pose le même problème que ma première suggestion avec les images plus petites que 320...

à priori non, je viens de tester avec

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="conteneur_parent">
  <div id="div_image">
    <img src="http://www.developpez.net/forums/avatars/108975-candygirl.gif?dateline=1172141348" />
  </div>
</div>

l'image est dans un premier temps bien étirée à 320px.

**rodolphebrd** · 24/11/2013, 11h13

Bonjour tout le monde,

j'arrive après la bataille...

Mais le sujet est intéressant.

Le code de CandyGirl ne fonctionne pas avec des images < 320px

J'ajouterai width:320px; à img

http://codepen.io/anon/pen/IHbum

Edit : NoSmoking même problème pour des images <320px.

**Candygirl** · 24/11/2013, 12h35

Envoyé par NoSmoking

l'image est dans un premier temps bien étirée à 320px.

J'ai cru comprendre qu'une image plus petite que 320px ne devrait justement pas être étirée ?

Envoyé par rodolphebrd

Le code de CandyGirl ne fonctionne pas avec des images < 320px

J'ajouterai width:320px; à img

http://codepen.io/anon/pen/IHbum

Qu'entends-tu par "ne fonctionne pas" ? (cf ma remarque ci-dessus).

D'après ce que j'ai compris, l'image doit garder sa taille d'origine sauf si > 33% ou >320px => ne doit justement pas être étirée à 320px si plus petite.

Autrement mon premier code aurait été correct... mais super Bovino m'a ouvert les yeux !

Ou alors j'ai rien compris

**rodolphebrd** · 24/11/2013, 13h47

Envoyé par SylvainPV

...je souhaite que mon image n'occupe pas plus de 320 pixels ET pas plus de 33%.

CandyGirl : C'est vrai qu'on peut envisager ta solution comme celle qui correspond à ce que veut SylvainPV.

C'est à dire une image dont la largeur est < 320px et 33%.

1 - Donc si l'image est plus grande (>320px) elle sera réduite.
2 - Si elle est plus petite (<320px) elle sera agrandie à 320px tant que le conteneur le permettra. (c'est là certainement une interprétation de ma part mais ça correspondrait à une certaine logique en terme d'harmonie de design - bien sûr tant que le zoom de l'image n'est pas excessif.)

**SylvainPV** · 25/11/2013, 16h33

Merci pour votre aide à tous.

Effectivement, la solution de Candy Girl est celle que je cherche. Je souhaite que si l'image a une taille naturelle de moins de 320px, celle-ci ne soit pas étirée (deux max-width donc, c'est là toute la problématique).

Ça marche avec un ou deux wrapper :
http://jsfiddle.net/CSbER/

Il vaut mieux utiliser la solution à 2 wrappers. Le défaut de la solution à un seul wrapper, c'est que le wrapper lui occupe toujours 33% de largeur. Donc on ne peut pas mettre un bloc de texte juste derrière cette image, il y aura forcément un espace horizontal égal à :
33% - min(33%, 320px, image-original-width)

@rodolphe: ma question était purement technique, je suis d'accord avec toi sur le fait que garder la taille naturelle de multiples images à la suite est un bien mauvais choix en matière de design

**NoSmoking** · 25/11/2013, 19h47

Envoyé par Candygirl

J'ai cru comprendre qu'une image plus petite que 320px ne devrait justement pas être étirée ?

pas de doute que tu comprends mieux et plus vite que moi

Combiner deux règles max-width avec des unités différentes

CSS

Discussions similaires

Partager

Partager