Object-fit et aspect-ratio

Salut,

J'ai un petit problème d'usage de object-fit.
1) Le contexte : j'ai un bloc (un gros lien) contenant une image et du texte. L'image est de provenance extérieure, avec des dimensions et un aspect-ratio incertains.
2) Je veux forcer les dimensions de l'image, sans la déformer, en débordant d'une zone d'affichage au besoin. Exemple : je voudrais que mon image ait TOUJOURS un affichage en 4/3, avec une largeur 100%, largeur max 400px. Mon problème ici, c'est l'aspect ratio, que je n'arrive pas à fixer. Je voudrais que :
a) le navigateur constate la largeur disponible et en déduis celle de l'image (ça, pas de pb)
b) applique un ratio 4/3 pour en déduire la hauteur souhaitée
c) affiche l'image dans cet espace, en l'agrandissant au besoin pour respecter son ratio intrinsèque(ça, a priori, c'est bon)

<a href="/foo" class="ctt">
    <picture>
        <img loading="lazy" src="foo" alt="whatever" class="ctt__img">
    </picture>
    <p class="ctt__img__titre">titre image</p>
    <p class="ctt__img__auteur">auteur image</p>
    <h3 class="ctt__titre">titre bloc</h3>
    <p class="ctt__desc">description bloc</p>
</a>

.ctt {
  display: block;
}
.ctt__img {
  width: 100%;
  max-width: 400px;
  object-fit : cover;
}

Aïe euh le problème c'est que ça doit nécessairement être une image de contenu, pas un background css.

Salut,

Voila un trick pour arriver à avoir une ratio 4:3 mais bon ca reste un peu du bricolage. J'imagine qu'il faudrait placer ton img en absolute par dessus :

https://www.w3schools.com/howto/howto_css_aspect_ratio.asp


Exemple : https://jsfiddle.net/undless/60jh3kst/
Modifié par _laurent (10 Aug 2020 - 11:16)

_laurent : La padding-box, je connaissais, mais là j'espérais une solution plus propre en CSS3.

Y'a pas moyen de faire ça sans bidouille de ce style ?

Le soucis ici c'est de récupérer une largeur variable pour en faire une hauteur. On a pas encore l'unité "75parentwidth" malheureusement (comme "75vw" mais avec le parent et pas le viewport.). Le padding en % se base sur la largeur du bloc (comportement voulu ou bug ?) https://developer.mozilla.org/fr/docs/Web/CSS/padding

Donc non je ne pense pas qu'il y ait d'autres solutions.

Sinon faut attendre le support de aspect-ratio https://caniuse.com/#feat=mdn-css_properties_aspect-ratio
Ou passer en Js (et encore...).

Mais sinon cette technique n'est pas si mauvaise que ça. Elle est utilisée par Bootstrap entre autre.

Bonne journée

Hello,

C'est certain que ce n'est pas une solution super élégante (avis personnel) mais tout de même robuste (qui peut aller en production), et uniquement CSS… En attendant mieux, je crois que tu devras te contenter de ces bons points et de cette unique solution (ce qui est déjà pas mal quand on y pense )

Yordi,

Je ne voulais pas du tout médire des solutions proposées par Laurent (que j'utilise déjà, la solution, pas Laurent) ou DrPhilGood. Je croyais simplement qu'il existait une solution moderne avec aspect-ratio et/ou object-fit.
Tout tristounet d'avoir cru qu'on était plus avancé dans ses propriétés qu'on ne l'est pour l'instant, snif.

Merci tout le monde anyway

Je viens de voir la réponse d'Olivier, et j'avoue que ça me laisse perplexe aussi.