Le code suivant fonctionne bien dans Firefox et Chrome, mais pas dans Safari (testé sur Mac et iPad): http://jsfiddle.net/efd87/ . L'objectif est d'avoir un wrapper DIV Gardez un rapport d'aspect fixe ( sur safari L'image ne s'affiche pas à cause du Voyez-vous une solution pour ce problème? Je suis sur cela pendant des heures ... Hauteur: 0 (qui donnera une hauteur de 0 pour l'IMG). Avec Hauteur: 100% L'affichage de l'image mais ne convient pas à la div (il déborde).
4 Réponses :
Ce n'est pas vraiment une bonne réponse à votre question, mais c'est une réponse néanmoins.
Je doute vivement qu'il soit possible de faire cela à l'aide d'une approche CSS uniquement, car autant que je sache (je suis heureux d'être corrigé sur cela), il n'y a aucun moyen d'effectuer des calculs basés sur l'autre propriété CSS. Donc La manière dont vous cherchez actuellement que le remplissage de fond ne fonctionne pas non plus, cela fonctionnera à votre écran si quelqu'un d'autre écran a un rapport d'aspect différent ou que de nombreuses barres d'outils changent le rapport de format du navigateur. fenêtre puis le rapport d'aspect sera faux. % est du parent qui sauf si vous pouvez garantir la taille de vous ne pouvez pas vraiment utiliser.
Autant que je puisse dire à votre seule option à ce sujet est JavaScript. La plus évidente et ma recommandation serait jQuery ou un autre cadre pour calculer et définir explicitement la taille basée sur la largeur. N'oubliez pas d'écouter la fenêtre de la fenêtre du navigateur cependant. largeur: hauteur * 1.3; n'est par exemple possible. Vous ne pouvez pas utiliser% non plus parce que c'est un pourcentage du parent, non de soi.
largeur 100% et hauteur automatique a fonctionné pour moi sur Safari. Initialement, j'utilisais à 100% pour W et H qui fonctionne bien sur FF, mais a échoué sur Safari. HTML: P> *, *:before, *:after {
-moz-box-sizing: border-box;
}
Si vous n'êtes pas inquiet pour les vieux navigateurs, vous pouvez utiliser la propriété Object-Fit
est-ce que cela aide? Stackoverflow.com/Questtions/1311068/...
Matthieu, vous voudrez peut-être rejouer à la page liée. Ma réponse présente deux approches, dont l'une est pure CSS et qui sont toutes deux sans javascript.
Regardez, c'est que la meilleure chose à faire est de calculer la largeur / hauteur de manière dynamique sur JS, car c'est un enfer d'un mal de tête pour le faire fonctionner sur Safari, principalement lorsque vous avez une hauteur dynamique en raison d'une barre de navigation, etc. EX, pour le rapport de format 9/16 (téléphones mobiles) DO: Hauteur: fenêtre.innerHeight; largeur: $ {
$ {window.innerheight * 9/16} px }