Je veux que mes images redimensionnent lorsque la hauteur de la fenêtre change tout en gardant le rétractable contenant de la div. J'ai essayé d'utiliser: mais il ne semble pas fonctionner comme prévu. Le div ne diminue pas. En fait, une fois que je joue une fois que je joue avec les propriétés CSS dans le débogueur.
9 Réponses :
Je suppose que vous devrez avoir recours à JavaScript:
Oui, essayait d'éviter JS.
Il vous suffit de conserver votre image Voici le Solution de travail P> le CSS: strong> p> edit forte > p> mises à jour max-hauteur code> à 100%. C'est ça. CSS code> pour la classe img code> pour rendre l'image correspond à l'ensemble de la DIV.
Voici le Solution de travail pour la modification . P> img {
max-height: 100%;
max-width: 100%;
height: 100%;
display:block;
}
Vous voudrez peut-être définir affichage: bloquer sur l'image pour vous débarrasser de certains espaces en ligne ajoutés sous l'image.
Oups .. j'ai raté ça. Mis à jour. Belle prise. - user1846192
Parfait! Pourriez-vous s'il vous plaît expliquer pourquoi cela fonctionne et le code d'origine ne fait pas? Avez-vous voulu dire max-hauteur ou max-largeur dans la première phrase?
Si vous êtes satisfait de la réponse et des efforts, veuillez l'accepter avec une ticket vert et une uppote. Merci - @xyand
Le seul problème avec votre solution était que la DIV devait être convertie de son affichage de bloc inhérent à la ligne en ligne. Maintenant, pour l'image, ce qui en fait un affichage de blocs signifiait que c'était un ajustement parfait à l'intérieur de la Div. Max-hauteur et max-largeur signifiaient que lorsque la fenêtre a été réduite, la DIV avec une image pourrait également s'étirer. J'espère que cela t'aides. - @xyand
Donc, en fait, il n'a rien à voir avec max-largeur / max-hauteur . Paramètres Affichage: Inline; Est-ce que l'astuce.
Oui. Affichage: Inline; est suffisant, mais idéalement si vous travaillez sur plusieurs images et problèmes de streching s'ils se produisent, max-hauteur pour que les images doivent être utilisées. - @xyand
Hey tu as oublié d'attribuer votre prime. :) - @xyand
Je dois attendre 24 heures. Mais je ne suis pas sûr que votre solution soit suffisante. J'ai besoin de l'emballage pour être de type bloc (pour placer d'autres éléments contenus). Quoi qu'il en soit, si inline est la clé ici, veuillez indiquer clairement votre réponse. Il est difficile de comprendre du texte.
Oui, c'est l'affichage : Inline; qui doit être utilisé pour ce cas, mais comme vous avez mentionné que vous devez en faire un bloc, je vous suggère de créer un wrapper de bloc div et placez cette inline Div à l'intérieur car il va accueillir les images si je suppose à partir de votre scénario, tous les éléments contenus seront placés à l'intérieur du bloc principal principal div. - @xyand
Laissez-nous Continuez cette discussion en chat
.. Même maintenant, cela ne semble pas fonctionner pour inline-block éléments. Dans le chrome et l'opéra, je reçois comportement légèrement différent < / a> de ce que l'OP décrit. Firefox semble la même chose.
@ Gandalf3 - Pouvez-vous partager plus d'informations et créer un lien vers le problème?
@Nkl La question que j'ai liée a un Fiddle qui démontre le comportement que j'ai remarqué (bien que certains trucs supplémentaires sur le côté)
Vous voulez donner la largeur de votre image à 100%. Utilisez ceci.
img {
height: 100%;
width: 100%;
}
J'ai besoin de largeur pour être proportionnelle à la taille. Pas 100% de l'élément contenant.
Lorsque vous fournissez une largeur et une hauteur pour la DIV en%, elle redimensionne en fonction de la taille de la page. Et la taille de l'image en% est relative à la largeur et à la hauteur de la div. J'ai gardé la hauteur Div à 90% de l'espace et de la largeur disponibles à 50%. L'image est à 90% de hauteur et de largeur, de sorte que vous puissiez voir la ré-dimensionnement des sections d'image et de div.
J'ai eu un peu de travail à votre violon, mais je ne pense pas que les navigateurs changeront la largeur d'un Je peux cependant suggérer une autre approche pour placer des éléments dans les coins de votre image de ré-dimensionnement automatique. Au lieu de placer ces éléments à l'intérieur d'un Voici un exemple jsfiddle démontrant cette approche. Vous verrez que les images restent dans les coins de l'image principale lorsque vous redimensionnez la fenêtre de résultat (et modifiez ainsi la taille de l'image principale). html CSS div en fonction de la largeur de l'image à l'intérieur de la largeur, j'ai essayé quelques choses mais ne pouvait pas le faire fonctionner. div qui maintient également l'image, vous pouvez simplement flotter l'image et flotter certains div avec une largeur fixe à droite et gauche de l'image, puis faire les div 'de la coupe dans l'image en définissant des marges négatives sur eux.
Cela ressemble à une direction intéressante. Cependant, à la fin, j'ai besoin de l'envelopper dans un conteneur dans le cadre d'une structure plus grande (galerie). Idées?
Aucune idée, je ne pense pas que CSS vous permettra de réimplaniser un élément d'emballage basé sur l'image à l'intérieur de sa réinitialisation, je pense que vous devrez simplement utiliser JavaScript pour cela.
Vous devez mettre à jour votre CSS écrit pour l'image de l'image
img {
max-height: 100%;
max-width:100%;
}
Si j'ai bien compris, vous souhaitez redimensionnez la taille de la taille, mais gardez la taille proportionnelle?
Si tel est le cas, utilisez-le: P>
img {
height: 100%;
display: inline-block;
}
Maintenant essayez de redimensionner la fenêtre et voyez ce qui se passe
L'image redimensionne proportionnellement, toujours.
Pas avec le dernier chrome. Avec Firefox, l'image est redimensionnée, mais l'emballage div n'est pas (mon problème d'origine)
Utiliser Affichage: Bloc; au lieu. Si vous devez la positionner à gauche, utilisez le flotteur: à gauche;
J'ai mis à jour le violon , avec la balise IMG Auto Fermer cela peut causer une erreur parfois ..,
Et si l'image a une hauteur et une largeur de taille spécifiées, il redimensionnera également et la hauteur de div augmente / diminue comme 90% lorsque je zoomb-in / ZOOM-OUT
J'espère que c'est la réponse, comme j'ai compris l'emballage et la réinformation, S'il vous plaît répondre s'il ne fonctionne pas ..
Bonjour, ça n'a pas vraiment répondu à ma question.
Pouvez-vous être plus précis, si autre solution, vous voulez que l'image redimensionne automatiquement avec la taille de DIV? Si tel est le cas, vous devez utiliser JavaScript avec la taille du navigateur modifié l'événement .. Attribuez la largeur des parents à la largeur de l'image
Je veux que la hauteur de l'image soit repoussée avec div (Works) et la largeur pour être définie proportionnellement. Mais je veux que la div se rétrécisse et n'occupe que l'espace d'image.
J'ai mis à jour le violon: jsfiddle.net/marmeek/zhyv9/41 mais imge a 3px Transparence dans le pied de page sinon woking bien maintenant .. :)
Désolé, l'image n'est pas mise à l'échelle lorsque la fenêtre est redimensionnée.
Sur le redimensionnement n'est pas appelé dans CSS, il est tiré sur les statistiques de temps de chargement disponibles. Si, dans ce cas, utilisez JQuery Réponse donnée par Tomas Kirda qui le fera.
Voir ma réponse (+ CSS d'origine). Ça fait l'affaire. Aucune évasion de JS si
Vieux truc était de recharger l'emplacement.Reload (); Mais ce n'est pas bon dans le scénario actuel, comme nous utilisons Ajax et rechargez la page est mauvaise sur mesure .. alors JQuery vient utile ..
Ajouter ce petit hack a travaillé pour moi. À ma compréhension, cela oblige le navigateur à redessiner / refuser son contenu. Fiddle . Je ne peux pas comprendre pourquoi cela n'est pas fait automatiquement par le navigateur. Testé sur Firefox, Chrome et Safari.
window.onresize = function() {
$(".thumb").each(function() {
this.style.display = "none";
this.offsetWidth;
this.style.display= "inline-block";
})
}
Je ne connais pas ce Jsfiddle est quelque chose que vous voulez ou non. J'ai fait un fond plein écran avec une option réactive. BTW, il utilise JavaScript et JQuery.