Tengo un div principal de flexbox centrado, #con , con % de ancho, que tiene un div que contiene imágenes ( .block ) intercalado entre dos divs de texto acolchado ( #info y #links ). ¿Cómo puedo forzar a .block img para que sea un cuadrado con una longitud de lado igual al ancho de #con con JS o CSS? .block podría contener 1x1=1 imágenes, 2x2=4 imágenes, etc.; por lo tanto, background-image no es una opción. Imitar la soluciónaquí solo parece funcionar si reemplazo con.width() en el JS con un valor específico (por ejemplo, 300 px, como se muestra aquí con esta imagen de marcador de posición), lo cual no es ideal.
var con = $("#con"); $(".block").css("height", con.width(), "width", con.width()); body { font-size:1rem; text-align:center; margin:0; height:100vh; display: flex; align-items: center; justify-content: center; overflow:hidden; } #con { width:50%; max-width:300px; display:flex; flex-flow:row wrap; justify-content:center; margin:5rem auto; border:1px solid black; } .block {width:100%; overflow:hidden; background:black;} .block img { position: relative; top: 0; bottom: 0; left: 0; right: 0; object-fit: cover; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <div id="con"> <div id="info">...</div> <div class="block"><img src="https://dbdzm869oupei.cloudfront.net/img/vinylrugs/preview/60150.png"></div> <div id="links">...</div> </div>No necesita JS para esto: solo use aspect-ratio: 1 para forzar una relación de aspecto cuadrada. Es posible que desee agregar display: block para asegurarse de que <img> no se muestre en línea (que es el valor predeterminado) también. Vea la prueba de concepto a continuación:
body { font-size: 1rem; text-align: center; margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } #con { width: 50%; max-width: 300px; display: flex; flex-flow: row wrap; justify-content: center; margin: 5rem auto; border: 1px solid black; } .block { width: 100%; overflow: hidden; background: black; } .block img { display: block; object-fit: cover; width: 100%; aspect-ratio: 1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <div id="con"> <div id="info">...</div> <div class="block"><img src="https://dbdzm869oupei.cloudfront.net/img/vinylrugs/preview/60150.png"></div> <div id="links">...</div> </div> Si desea admitir navegadores que no son compatibles aspect-ratio , puede usar una combinación de un truco de pseudo-elemento + relleno inferior para establecer una relación de aspecto fija en su lugar:
body { font-size: 1rem; text-align: center; margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } #con { width: 50%; max-width: 300px; display: flex; flex-flow: row wrap; justify-content: center; margin: 5rem auto; border: 1px solid black; } .block { width: 100%; overflow: hidden; background: black; position: relative; } .block::before { width: 100%; padding-bottom: 100%; content: ''; display: block; } .block img { display: block; object-fit: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <div id="con"> <div id="info">...</div> <div class="block"><img src="https://dbdzm869oupei.cloudfront.net/img/vinylrugs/preview/60150.png"></div> <div id="links">...</div> </div>