La Force de la hauteur de <div> pour correspondre à l'image
Je suis en train de construire un réactif page qui a une image et <div>
côté par côté:
La largeur et la hauteur de l'image à conserver leurs proportions et agrandir/réduire la fenêtre du navigateur.
La largeur de la <div>
fait la même chose, mais j'aimerais qu'il corresponde à l'image en termes de hauteur.
Est-il un moyen d'y parvenir? Voici un Violon du problème: http://jsfiddle.net/alecrust/xwJHw/
Enveloppez les deux dans un div, et ajouter de la hauteur de la zone de texte à 100%.
partagez votre code s'il vous plaît.
Qui pourrait aider: matthewjamestaylor.com/blog/...
Vous pouvez, si vous encapsuler le DIV autour de l'IMG... dans tout autre cas, vous avez besoin de simuler ce comportement (par exemple, en suivant les idées de la le lien biziclop a affiché) ou par l'utilisation de JavaScript pour les deux zones de hauteurs égales.
Violon de problème: jsfiddle.net/alecrust/xwJHw
partagez votre code s'il vous plaît.
Qui pourrait aider: matthewjamestaylor.com/blog/...
Vous pouvez, si vous encapsuler le DIV autour de l'IMG... dans tout autre cas, vous avez besoin de simuler ce comportement (par exemple, en suivant les idées de la le lien biziclop a affiché) ou par l'utilisation de JavaScript pour les deux zones de hauteurs égales.
Violon de problème: jsfiddle.net/alecrust/xwJHw
OriginalL'auteur AlecRust | 2012-09-18
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser display:table bien pour cela. Écrire comme ceci:
Cochez cette http://jsfiddle.net/xwJHw/8/
Remarque: display:table travaille jusqu'à IE8 & ci-dessus.
à l'aide de
display: table;
est une alternative à éléments flottants. Pensez à votre objectif et de ne pas être aussi étroit d'esprit. Vous avez une vraie bonne raison pour faire flotter les éléments par tous les moyens, même si la mise en page souhaitée peut être obtenue d'une autre manière? Ou vous avez besoin d'aide pour IE 7?J'ai besoin de soutien pour IE7, mais je suis heureux de contourner séparément. J'ai essayé de réaliser cette mise en page avec cette méthode à l'origine, mais il est devenu trop compliqué et causé de nombreuses autres questions. Continuera à jouer, merci pour votre étroitesse d'esprit de commentaire 😉
OriginalL'auteur sandeep
Vous pouvez utiliser jQuery.
Calculer la hauteur de l'image à l'aide de $('#imgId').hauteur() et le jeu de la même à Div.
Également voir le code, la façon dont les hauteurs sont ajustés ici http://filamentgroup.com/examples/equalHeights/
Est-ce jQuery solution liquide? Le Filament de Groupe exemple ne l'est pas.
Hey! C'est la solution idéale.
C'est une bonne solution et également mis en œuvre dans votre violon, voir ici: jsfiddle.net/akhurshid/xwJHw/6
Solution intéressante! C'est essentiellement faux colonnes, ce qui ne fera pas dans mon scénario, malheureusement. Il y a plusieurs éléments dans ces deux en haut, et les éléments doivent être flottait comme dans mon Violon.
OriginalL'auteur Murali Murugesan
ÉDITÉ:
@alecrust: C'est une bonne solution et également mis en œuvre dans votre violon, Voir Ici
Un pur css solution: VOIR DÉMO
CSS:
HTML:
C'est une bonne solution et également mis en œuvre dans votre violon, voir ici: jsfiddle.net/akhurshid/xwJHw/6
Solution intéressante! C'est essentiellement faux colonnes, ce qui ne fera pas dans mon scénario, malheureusement. Il y a plusieurs éléments dans ces deux en haut, et les éléments doivent être flottait comme dans mon Violon.
alecrust: o.k je l'ai eu, mais je ne comprends pas pourquoi ce vote? J'essayais de l'aider.
Des excuses. De ma compréhension, vous êtes censé downvote si la réponse n'est pas utile. Votre version éditée est bien, j'ai enlevé le downvote.
OriginalL'auteur Ahsan Khurshid