J'ai utilisé ce script pour obtenir une largeur, puis l'appliquer au même élément:
$(document).ready(function(){
$(".equal-height").each(function(){
var slideSize = $(this).outerWidth();
console.log(slideSize);
$(this).css({ "height" : slideSize + "px" });
});
});
Cependant, pour une raison quelconque, il existe des éléments qui parfois n'obtiennent pas une largeur et une hauteur correspondantes. Comme vous pouvez le voir dans ce violon: https://jsfiddle.net/cpfgtuzo/5/ le dernier L'élément a les bonnes dimensions, mais les autres sont tous supérieurs à leur largeur. J'essaie de les faire tous être carrés et je dois également prendre en charge les anciens navigateurs.
Cela ne semble être un problème que lorsque la taille de la fenêtre est plus petite et que les quatre éléments s'empilent dans une colonne 2.
3 réponses
Après vos commentaires sur une autre réponse,
J'ai de nombreux éléments sur la page qui utilisent ce script et tous n'ont pas la même taille (il y a aussi des ensembles de carrés plus petits)
Et
mais la boîte résultante ne sort pas carré. Si vous inspectez votre violon, les boîtes sont ~ 10px trop hautes
Cette solution semble surmonter ces problèmes, faites-moi savoir si cela vous aide, Working Fiddle
$(document).ready(function () {
$(".equal-height").each(function () {
var slideSize = $(this).outerWidth();
console.log(slideSize);
$(this).css({ "height": slideSize + "px", "width": slideSize + "px" });
//setting the width along with height
});
});
Même hauteur sur tous les éléments
J'utiliserais simplement la première case pour calculer la hauteur des autres éléments - au moins cela garantirait la même hauteur. De plus, il se débarrasserait de cette boucle ..
$(".equal-height").css({"height" : $(".equal-height").eq(0).outerWidth()});
Une ligne pour les gouverner tous
Mais, puisque cela ne correspondait pas à la portée ..
Création de carrés d'éléments de tailles différentes
Après quelques plaisanteries, il est clair que les largeurs sont retournées incorrectes uniquement après avoir commencé à altérer la hauteur. Cela peut facilement être testé en commentant la commande css qui définit la hauteur et en observant la sortie.
La solution semble être de définir une hauteur prédéfinie:
.link-quarters {
width: 25%;
height: 100px;
float: left;
...
Cela renverra exactement la même largeur sur tous les éléments (la partie importante) et vous pouvez ensuite définir la hauteur correspondante par programme sans problème.
Il y a toujours un problème avec l'arrondi, car la largeur en pourcentage peut entraîner des nombres décimaux arrondis par le navigateur (ou js).
https://jsfiddle.net/cpfgtuzo/17/
Hmm je pense qu'il y a un bug avec jQuery, quand il calcule la largeur de chaque élément.
Prenez ce jsfiddle comme solution de contournement.
// Height = Width
$(document).ready(function() {
var width = $('.wide-content').width();
// prevent jQuery from calculating the width of children
$('.wide-content').hide();
// $(".equal-height").width() is now 50
var slideSize = $(".equal-height").width() * width / 100;
$(".equal-height").each(function() {
$(this).css({
"height": slideSize + "px"
});
});
$('.wide-content').show();
});