Comments on J'ai déjà dit que je haïssais le CSS ?

I don't think the layout you describe is the one you should try to go for. If the window is already narrow, and you shrink the floated image, then the reader will see both a too small image, and text broken into a too narrow column. I think that for narrow windows, you should instead display the image as a block, not floating it, so that there's more width available and there is no text next to it.

This doesn't make the task of writing the CSS any easier though. Kowalsky has the right idea, using @media conditionals to turn off the float if the screen is narrow, but setting the correct width for the image is still difficult.

@Geo : je suppose que le fait que les forms verbales soient pratiquement invariables en anglais y est pour qqch.

attr() pourrait aider s'il renvoyait la valeur de l'attribut height, qu'elle ait été fixée par l'utilisateur ou calculée par le CSS. Dans ce cas, il serait simple de respecter le ratio 4:3 .

Cependant, si telle n'est pas la signification de attr(), tu as raison de dire que cela ne résoudra jamais pour ton problème (qui vient de ce que les DIV ne sont pas fondamentalement pensés, à l'origine, pour avoir un ratio => il faudrait inventer un display:image pour les blocs…).

Pour Geo et JML :
En tant que vieux, je peux préciser que ce tropisme non-conjugatif date des années 80. Par exemple à l'époque, l'anglicisme "destroy" était invariablement à l'infinitif :
"Rends-moi mon skeud de a-ah ou je te destroy !"
"Il m'a destroy car je ne lui pas rendu son skeud de a-ah".

> Les jeunes ne conjuguent plus les importations : « va tank, je te heal, il va drop la sword gros ! »

Exact ! j'ai également remarqué ça avec mes étudiants. " Est-ce que t'as push sur le git ?". Je me demande ce qui a causé cette transition.

feature → fonctionnalité
scaling → échelle, zoom
hack → bricolage
« Bricolage » est intéressant, il a le bon sens mais pas les bonnes connotations. Pourquoi « un hack » ne serait pas du bon français ? Pour preuve, on le conjugue (« Je le hackerais bien dans le code mais… »).
Les jeunes ne conjuguent plus les importations : « va tank, je te heal, il va drop la sword gros ! ». Et moi qui me demande si j'écris « ça beugue » ou « ça bugue » quand ça bug…

Salut David,

Je suis comme toi vis à vis de CSS…

Pour ton problème de traduction, je peux aider un peu :
une "feature" => fonction / fonctionnalité,
le "scaling" des images => dimensionnement ,
l'"aspect ratio" => format d'affichage (PAS format d'image)
du SVG "inliné" dans du HTML => ???
un "hack" => bidouille

Latex est pas mal non plus, dès lors qu'on veut faire quelque chose de très précis et élaboré.

Le problème du CSS, c'est : y a-t-il un pilote dans l'avion ?

Visiblement, ceux qui développent le CSS n'ont aucune idée de ce qu'ils font et ajoutent de nouvelles propriétés au petit bonheur la chance, sans projet clair.

calc() est un progrès, qui, combiné avec attr(), te permettrait de faire ce que tu veux. Cette page
<URL: https://www.alsacreations.com/article/lire/1630-la-fonction-calc-en-css.html >
dit que c'est possible, mais pas sur tous les navigateurs :

« img {
top: calc(50% - attr(height) / 2);
}
À l'heure actuelle, cette combinaison n'est pas reconnue par tous les navigateurs. »

Un peu de patience, donc ?

Bonjour David,

Il y a une erreur dans ta compréhension de l'utilisation de l'élément "max-width : tu indiques "on peut mettre un max-width qui va overrider le width", ce n'est pas tout à fait cela.

L'élément "max-width=60%" indique de n'utiliser QUE 60% de la largeur disponible pour afficher l'élément "img". Comme tu ne définis pas de largeur maximale pour l'affichage de ton site, tout va bien lorsque la résolution est grande, puisque les 400px sont largement inclus dans les 60% de largeur disponible et utilisée.

Mais lorsque l'on visualise ton site avec une tablette ou un mobile, ce sont les "media queries" que tu utilises dans ton fichier CSS qui définissent la largeur maxi de la page : soit respectivement 780px et 640px. Et à ce moment la largeur de ton image ne s'affichera alors au plus que sur 60% de ces valeurs.

Comme en plus tu rajoutes des marges, tu réduis d'autant cette largeur disponible, qui est elle-même réduite par les marges que tu appliques aussi aux éléments supérieurs composants ta page (article, entry-content, etc.) ce qui fait que ton image de 400px ne peux plus tenir intégralement dans l'espace imparti.

Pour afficher au mieux tes images, il faut leurs donner le maximum d'espace disponible, soit "max-width: 100%". Et pour garder le ratio de l'image, on indique que la hauteur de celle-ci sera modifiée proportionnellement à sa largeur, d'où le "height: auto". :)

(tout cela est lié à la bonne compréhension du "Modèle des boîtes CSS / CSS Box Model" - quelques liens à consulter :
<URL: http://romy.tetue.net/modele-des-boites-css >
<URL: https://www.w3.org/TR/CSS2/box.html#box-dimensions >
<URL: https://en.wikipedia.org/wiki/CSS_box_model >
)

Pour illustrer visuellement le comportement de l'usage du max-width, je te propose ce test : recherche le code suivant tout à la fin de ton fichier CSS

@media (min-width: 781px) {
body {
font-size: 16px;
}
}

et modifie le de la façon suivante :

@media (min-width: 781px) {
body {
font-size: 16px;
max-width: 60%;
margin: auto;
}
}

Tu constateras que pour tout affichage sur un écran dont la résolution est supérieure à 781px, la largeur de ta page (tout ce qui est contenu dans l'élément "body") n'occupe plus que 60% de l'espace total disponible (max-width: 60%;) (et accessoirement est centré avec "margin: auto;" pour que ce soit plus esthétique)

Pour tout affichage sur une résolution en largeur inférieur à 780px, la page s'affiche toujours en plein écran (soit 100%).

A noter que l'unité utilisée pour définir une dimension peut être exprimée en unité relative (%) ou absolue (px, em)

Si tu remplaces "60%" par "1280px", la largeur restera fixe quelque soit la résolution de l'écran (si > 781px). Ce seront alors les marges latérales qui s'adapteront (margin: auto).

(Fin de l'explication que j'espère n'être pas trop confuse)

D'autre part, pourquoi t’embêter à rajouter plein d'éléments de style dans le code de tes pages HTML alors qu'il te suffit de l'inscrire une fois pour toute dans le fichier CSS que tu appelles dans ton header ? Cela donnera :

img {
height: auto !important;
max-width: 100%;
}

Voire éventuellement avec l'ensemble de tes éléments :

img {
height: auto !important;
max-width: 100%;
float: right;
clear: right;
margin-left: 1em;
margin-bottom: 1em"
}

Il ne te restera plus qu'à indiquer la taille de tes images dans ta page :

<img src="blueish-foobar.png" width="400" height="300" alt="[Photo d'un foobar bleuté]" />

Ou en créant une classe CSS spécifique pour que cela ne s'applique pas aux autres images présentes sur ton site :

img {
height: auto !important;
max-width: 100%;
}
.image {
float: right;
clear: right;
margin-left: 1em;
margin-bottom: 1em"
}

Que tu utiliseras selon ton besoin en ajoutant cette fois la classe "image" dans ton code :

<img src="blueish-foobar.png" width="400" height="300" alt="[Photo d'un foobar bleuté]" class="image"/>

En aparté, tu peux aussi modifier la commande meta "viewport" de ton header pour faciliter la lecture sur mobiles :

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">