Si quiero ajustar una imagen grande (con una relación de aspecto arbitraria) en un div pequeño, de acuerdo con esta respuesta , solo necesito establecer el ancho y la altura máximos al 100%,
img { max-width: 100%; max-height: 100%; } Y si necesito centrar aún más la imagen, de acuerdo con esta respuesta , podemos establecer el margen en auto ,
img { display: block; margin: 0 auto; }Pero de esta manera, la imagen solo queda centrada en horizontal. Para tenerlo centrado verticalmente, he intentado seguir los enfoques pero no funciona.
img { margin: auto auto; } img { vertical-align: middle; }¿Alguien puede ayudar?
Puedes usar la pantalla flexible:
.div { border: 1px solid; display: flex; justify-content: center; align-items: center; } img { max-width: 100%; max-height: 100%; } .portrait { height: 80px; width: 30px; } .landscape { height: 30px; width: 80px; } .square { height: 75px; width: 75px; } Portrait Div <div class="portrait div"> <img src="http://i.stack.imgur.com/xkF9Q.jpg" /> </div> Landscape Div <div class="landscape div"> <img src="http://i.stack.imgur.com/xkF9Q.jpg" /> </div> Square Div <div class="square div"> <img src="http://i.stack.imgur.com/xkF9Q.jpg" /> </div>Aquí hay un pequeño truco para usar...
Primero, asegúrese de que el div principal esté configurado en position:relative;
Luego en el img agrega estos valores
position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%) !important; Esto alineará automáticamente el img en el medio del div principal. Puede eliminar todos los demás valores y usarlos así
img { max-width:100%; max-height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%) !important; }Según si la altura y el ancho en línea del div principal tienen una relación de aspecto mayor o menor que la imagen, la imagen se centrará horizontal o verticalmente. Hay un pequeño truco con JavaScript, pero mirando el CSS, parece estar cerca de lo que intentabas inicialmente.
$(".imgContainer").each(function() { const height = $(this).height() > $(this).children("img").eq(0).height() ? parseFloat($(this).height() * 0.99) + "px": "100%"; $(this).css("line-height", height); }); .imgContainer { text-align: center; border: 3px solid blue; } .imgContainer img { vertical-align: middle; max-width: 100%; max-height: 100%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="imgContainer" style="width: 435px; height: 320px"> <img src="https://i.stack.imgur.com/3WpTo.jpg"> </div> <div class="imgContainer" style="margin-top: 10px; width: 435px; height: 260px"> <img src="https://i.stack.imgur.com/3WpTo.jpg"> </div> <div class="imgContainer" style="margin-top: 10px; width: 435px; height: 289px"> <img src="https://i.stack.imgur.com/3WpTo.jpg"> </div>