Recherche d'une technique pour contrôler le rapport hauteur / largeur d'une balise. La propriété de rapport hauteur / largeur n'est pas suffisamment prise en charge pour être utilisée au moment de cet article.
En général, j'emballerais l'élément dans un conteneur et appliquerais un haut de rembourrage pour créer l'effet nécessaire. Cependant, le contenu que j'ai est en ligne avec d'autres contenus et je ne peux pas toucher le html.
La largeur du conteneur pour laquelle l'image est réactive, donc appliquer directement la hauteur et la largeur n'est pas une option.
Par exemple, avoir une image conserve un rapport 16: 9 dans un conteneur. Peu importe l'échelle visuelle de l'image. Je vais faire ajuster l'image avec
object-fit: cover
Existe-t-il une technique actuelle qui ne fonctionnerait que sur la balise img elle-même?
3 Réponses :
Puisque vous ne pouvez pas utiliser le tweak de remplissage, je suppose que vous ne pouvez pas non plus utiliser javascript. Si vous ne pouvez travailler que sur la balise img, la seule solution que je verrais qui serait proche de ce que vous souhaitez atteindre serait:
.yourImage {
width : 100%;
height: 100%;
object-fit: contain;
}
Droite. Pas de js non plus. J'ai réalisé que je devais ajouter des précisions dans la description et le titre. J'ai besoin de conserver un rapport hauteur / largeur de mon choix. J'ai donc besoin de forcer 1: 1 ou 16: 9 etc ... quel que soit le conteneur.
Vous pouvez décider de la largeur en fonction du viweport, comme
.theImage {
width: 20vh;
height: auto;
}
ou une autre variante de celui-ci.
C'est un problème de rapport hauteur / largeur. Malheureusement, le CSS sur la balise img pour utiliser la technique du ratio d'aspect a besoin d'un conteneur div . J'ai eu un problème similaire que j'ai résolu en utilisant le CSS dès que:
.img {
display: table-cell;
max-width: ...;
max-height: ...;
width: 100%;
}