Fluidité des Images: Comment définir la largeur et la hauteur?
Je suis en train de construire un fluide de mise en page, dont je suis le style de grandes images avec:
.fluid_img {
height: auto;
width: auto;
max-width: 100%;
}
Cela fonctionne bien, le problème est que je ne peux plus utiliser les attributs width et height de la balise html < img > (ils n'ont pas d'effet). J'ai besoin de ces attributs pour le navigateur peut "sauver" l'espace nécessaire pour l'image avant il a été chargé, de sorte que le reste de la page ne bouge pas lorsque l'image est chargée.
Est-il possible d'avoir les deux fonctions? (image fluide + espace enregistrés avant le chargement de l'image)
Compte tenu des réponses ci-dessous, votre question ne semble pas demander exactement ce qui est semble demander. Comme vous le dites
Ce que je ment, c'est que pour les non-liquide de mises en page, la largeur et la hauteur des attributs peut faire le travail de sauvegarde de l'espace nécessaire pour l'image (j'utilise inline attributs html parce que je peux utiliser ensuite dinamically. Par exemple, dans une galerie d'images, chaque image peut avoir différentes valeurs pour la largeur et la hauteur, donc je ne peux pas utiliser les css). Pour les dispositions fluides, j'ai pour régler la largeur et la hauteur de l'auto, et je ne sais pas comment faire pour dire au navigateur: "Regardez, j'ai cette image, avec X largeur et Y la hauteur, et j'ai besoin de vous pour gagner de l'espace pour cela. Rappelez-vous juste de ne pas fixer ces valeurs, parce que nous avons un fluide de mise en page ici."
Je soupçonne que la suppression de
I can no longer use the width and height attributes in the html image tag
. Êtes-vous intéressé à utiliser que cette phrase à proposer? Pouvez-vous nous donner plus d'informations sur votre problème, comme tout autre code ou un js fiddle?Ce que je ment, c'est que pour les non-liquide de mises en page, la largeur et la hauteur des attributs peut faire le travail de sauvegarde de l'espace nécessaire pour l'image (j'utilise inline attributs html parce que je peux utiliser ensuite dinamically. Par exemple, dans une galerie d'images, chaque image peut avoir différentes valeurs pour la largeur et la hauteur, donc je ne peux pas utiliser les css). Pour les dispositions fluides, j'ai pour régler la largeur et la hauteur de l'auto, et je ne sais pas comment faire pour dire au navigateur: "Regardez, j'ai cette image, avec X largeur et Y la hauteur, et j'ai besoin de vous pour gagner de l'espace pour cela. Rappelez-vous juste de ne pas fixer ces valeurs, parce que nous avons un fluide de mise en page ici."
Je soupçonne que la suppression de
width: auto;
de votre CSS permettrait de résoudre le problème.OriginalL'auteur HappyDeveloper | 2011-08-14
Vous devez vous connecter pour publier un commentaire.
Je suis également à la recherche de la réponse à ce problème. Avec
max-width
,width=
etheight=
, le navigateur dispose de suffisamment de données qu'il devrait être en mesure de quitter la bonne quantité d'espace pour une image, mais il ne semble tout simplement pas travailler de cette façon.J'ai travaillé autour de ce avec un jQuery solution pour l'instant. Il vous demande de fournir la
width=
etheight=
pour votre<img>
balises.CSS:
HTML:
jQuery:
Cela s'applique automatiquement la technique vu sur: http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/
OriginalL'auteur Paul Pritchard
Styles en ligne annuler la feuille de style style de conception. La cascade CSS va de feuille de style externe(s) (lecture de haut en bas, tellement bas allait annuler en haut), les styles de
<head>
(aussi haut vers le bas), des styles en ligne, des styles utilisateurs. Il y a un certain nombre de façons de gérer cette situation, bu je ne sais pas si l'un d'entre eux sont vraiment une bonne idée, comme l'a demandé.1) définir votre fixe dimension dans la feuille de style ou de la tête ou en ligne, puis annuler avec un script placé en bas de la page pour auto dimensions.
<script>vdivid.style.width = 'auto'</script>
2) faire un
<img>
avec des dimensions fixes enveloppé dans un<div>
avec auto dimensions. ce n'est pas réellement ce que vous voulez bien. `3) web optimiser vos images afin qu'ils ne prennent pas beaucoup de temps à charger.
4) dimensions en pixels sont généralement pas quelque chose que vous utilisez dans les dispositions fluides, car ils sont fixes. donc, ne
#fluiddiv {width:20%;height:20%;}
c'est la fluidité d'une mise en page fonctionne. ou vous pouvez utiliser em au lieu de %s'. em s flex basé sur la taille de police par défaut de l'appareil, tandis que %s'flex sur la base des dimensions de la fenêtre ou de l'élément parent (s'il a un parent autre que le corps ou un haut-niveau de l'emballage). Pour obtenir des non-images déformées de cette manière, il faudrait... je ne pense pas que vous pouvez le faire avec %s', de sorte que l'utilisation de l'em dans le même rapport que les images.OriginalL'auteur conspiritech
Vous pouvez utiliser un div parent avec un pourcentage de remplissage en fonction de l'aspect ratio, comme décrit ici.
La solution est moche et je suis surpris de voir que, bien que la fluidité des images sont vraiment vieux il n'y a pas beaucoup de parler de ce problème ou une solution élégante.
OriginalL'auteur user2425962
Utiliser les éléments suivants:
Le inline-styles de remplacer ce que les styles sont attachés à partir de la fluid_img classe basée sur la priorité. Vous pouvez le voir en allant CSS dans Firebug /Chrome et de visualisation qui styles sont appliqués à votre
img
.En outre, vous pouvez utiliser la suite de jQuery si cela peut aider lorsque vous êtes dynamiquement l'insertion et la modification des images:
Espérons que cette aide!
OriginalL'auteur ghayes