28172 sujets

CSS et mise en forme, CSS3

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;
}
bonjour essaie çà
c'est ce que j'utilise


background-size: 100%;
	background-image: url('image.jpg'); 
	background-attachment: fixed;
	background-size: cover;
	background-position: top center; 
	background-repeat: no-repeat;
_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 ?
Modérateur
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
Modérateur
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 Smiley smile )
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
Bonjour. Remarquez que rien n'empêche de paramétrer une div avec un background-image tout en laissant l'image de contenu à l'intérieur de cette div si l'on y tient (pour le référencement par exemple).
Modérateur
Olivier C a écrit :
rien n'empêche de paramétrer une div avec un background-image tout en laissant l'image de contenu à l'intérieur de cette div

La pour le coup je vois pas l’intérêt... Smiley sweatdrop
Pardon, j'ai oublié de répondre : l"image de contenu pour le referencement, l'image en background pour la maléabilité à l'affichage via les styles.
Sujet clos
Aller à