Débat [css] les avantages du inline

bezzy
Les bases HTML/CSS

Bonjour,

Alors voila en tant que développeur on m'a toujours dis que le css inline c'est pas top pour l'organisation du css... Le fait est que quand je développe des sites en wordpress ou en utilisant des frameworks, bref des sites dynamiques eh bien je dois dire que le inline me sauve la vie.

Pourquoi je dis cela ? Imaginons un client un peu chiant qui veut que la taille de ses images de ses articles correspondent parfaitement à une hauteur précise et qui plus est il ne veut pas se casser la tête à redimensionner ses images. Donc la on se retrouve un peu dans la merde quand on doit commencer à styliser des articles car les responsives images agissent de manières assé imprévuent au niveau de la hauteur. C'est là que les styles inlines me sauvent la vie. Eh oui je n'ai qu'a incorporer dynamiquement l'image avec un background-image dans la div et boum je suis tranquil.

Donc en fait je voudrais avoir un peu votre avis :)

Je dis peut-être de la grosse merde mais je suis là pour discuter.

Merci

6 réponses

tleb

Salut,

Donc la on se retrouve un peu dans la merde quand on doit commencer à styliser des articles car les responsives images agissent de manières assé imprévuent au niveau de la hauteur.

height: 100% et bien adapter la div parente ? Sinon les data- ?

JeremieMeunier

<blockquote>
Salut,
Donc la on se retrouve un peu dans la merde quand on doit commencer à styliser des articles car les responsives images agissent de manières assé imprévuent au niveau de la hauteur.
height: 100% et bien adapter la div parente ? Sinon les data- ?
</blockquote>

Perso j'utilise aussi la propriété calc de css

div.ma-div-article {
    width: 150px;
}
div.ma-div-article img {
    width: 150px;
    height: calc(150px * 0.56); /* Ration pour une image en 16:9 */
}

Pour calculer les ration tu peut utiliser Aspect Ratio Calculator.
Après la solution de tleb est pas mal aussi je pense !

bezzy
Auteur

Merci de vos réponse. J'ai testé la solution de Jeremie et la mienne, il s'apparente que la mienne correspond mieux.

A gauche ma méthode, a droite la méthode de jeremie.

tleb

Tu as pris une image au ratio 16:9 ? Ça ressemble plus à une image au ratio 1:1.

JeremieMeunier

<blockquote>
Merci de vos réponse. J'ai testé la solution de Jeremie et la mienne, il s'apparente que la mienne correspond mieux.
A gauche ma méthode, a droite la méthode de jeremie.
</blockquote>

Tu peut aussi faire l'inverse et donner une hauteur fixe en pixel et avoir la largeur variable !

Benjamin Derepas

Pour gerer les dimensions des images tu as plusieurs solutions selon ta configuration :

  • parent en display flex et img en flex 1
  • width 100% height auto ou inversement , couplé avec un overflow hidden sur le parent .
  • objecti fit et object position