Tengo un deslizador de pantalla completa que contiene un montón de imágenes como diapositivas como esta:
<div class="swiper-slide"><div class="swiper-image"><img src="..."></div></div>Con esta configuración (css de swiper estándar), las imágenes tienen un ancho máximo y una altura completa. Me gustaría darle a la imagen un relleno para que la paginación y las flechas nunca se superpongan a la imagen. Esto funciona para el ancho (y para la parte superior si no es swiper-slide == flex) pero no para la altura.
No estoy seguro de por qué el relleno para la altura se come / no tiene efecto. la altura no escala la imagen.
Establecer las dimensiones de las imágenes puede ser un poco contrario a la intuición. Sin embargo, en su caso, configurar el relleno no cambiará el tamaño de la imagen y, por lo tanto, se está desbordando de su cuadro delimitador. Si está en un navegador de cromo, haga clic con el botón derecho en la imagen y seleccione Inspect element ; esto le mostrará las verdaderas dimensiones.
Debe establecer el tamaño de la imagen, en lugar del relleno. Para usar porcentajes, debe asegurarse de que el div principal también tenga su tamaño establecido. Si cambia las definiciones css de .swiper-image y .swiper-image img a
.swiper-image { height: 100%; display: flex; justify-content: center; align-items: center; } .swiper-image img { display: block; max-height: 80%; max-width: 90%; }¿Esto logra el efecto que quieres?