Estoy tratando de crear dinámicamente 3 "tarjetas de muebles" en la carga del cuerpo donde cada tarjeta implementa el complemento de jQuery redimensionable , pero solo el primer elemento parece ser redimensionable dentro de su contenedor (tanto ancho como alto). Los otros dos solo son redimensionables en altura.
No estoy seguro si es mi código o si estoy manejando mal el complemento o si es algo aún más complicado que eso. Agradecería ayuda, gracias de antemano.
guión.js
$(function() { $(".r").resizable({ containment: '.card' }); }); //array of furniture items furnitureCaption = ['chair', 'plant', 'table']; //dynamically create furniture cards on load function init() { //get the element we are appending to var container = document.querySelector('.container'); furnitureCaption.forEach((cap, i) => { //create the element we are appending var card = document.createElement('div'); card.className = "ui-widget-content card"; var cardDetail = document.createElement('div'); cardDetail.className = "ui-state-active r"; //set the background image based on picture url array cardDetail.style.backgroundImage = "URL(./img/" + cap + ".png)"; cardDetail.style.backgroundSize = "100% 100%"; //make the span caption based on caption array var spanTag = document.createElement('span'); spanTag.innerHTML = furnitureCaption[i]; //append and put on page cardDetail.append(spanTag); card.append(cardDetail); container.append(card); }); }índice.html
<body onload="init()"> <div class="container"></div> </body>estilo.css
.container { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4em; } .card { width: 150px; height: 150px; } .card h3 { text-align: center; margin: 0; margin-bottom: 10px; } .r { width: 50px; height: 50px; min-width: 20px; min-height: 20px; } .r, .card { padding: 0.5em; } span { font-size: 1em; }