Pregunta sobre Modern Comparison Slider de Wordpress:

Respeta el tamaño de la imagen

Un usuario preguntó 👇

Este plugin no respetará ninguna de las reglas de tamaño de imagen que intento aplicar. Hace que la imagen tenga el ancho de toda la página, lo que también es una cuestión de aumentar las imágenes con una resolución más baja (esto siempre se ve horrible). El único cambio que pude hacer como resultado resultó en problemas de escala con la segunda imagen de comparación. ¿Podría proporcionar algunos ejemplos de código para modificar el tamaño de la imagen y el control de alineación mientras usa este plugin?

Gracias

Lo intenté:

Usar modificadores de comando img como width = «400 ″ height =» 600 ″ Usar tamaños de clase de imagen (pequeño, mediano, grande) incrustados en palabras y clases similares proporcionadas por plugins.

[compare]
<figure class="wp-block-image size-large is-resized"><img src="PIerreCenterLobbyPhoto_1024.jpg" alt="" class="wp-image-535" width="342" height="512"></figure>
<figure class="wp-block-image size-large is-resized"><img src="PIerreCenterLobbyDrawing_1024.jpg" alt="" class="wp-image-535" width="342" height="512"></figure>
[/compare]

Copie el código creado por el bloque de imágenes del editor de WP para dos imágenes que le den el tamaño deseado. Si ponemos ese código en el medio [compare][/compare] da fotos a pantalla completa y se ve horrible

<figure class="wp-block-image size-large is-resized">
[compare]
<img src="PIerreCenterLobbyPhoto_1024.jpg" alt="" class="wp-image-535" width="342" height="512">
<img src="PIerreCenterLobbyDrawing_1024.jpg" alt="" class="wp-image-535" width="342" height="512">
[/compare]
</figure>

Copie el código creado por el bloque de imagen del editor de WP para dos imágenes que le den el tamaño deseado. Si damos [compare][/compare] dentro de ese código, tiene el tamaño correcto, pero la segunda imagen de comparación se deteriora con el control deslizante en lugar del comportamiento de comparación normal.

<figure class="wp-block-image size-large is-resized">
[compare]
<img src="PIerreCenterLobbyPhoto_1024.jpg" alt="" class="wp-image-535" width="342" height="512">
<img src="PIerreCenterLobbyDrawing_1024.jpg" alt="" class="wp-image-535" width="342" height="512">
[/compare]
</figure>

Tenga en cuenta que no soy un codificador web, pero puedo identificar y aplicar patrones de codificación y, por lo general, encuentro el éxito con un poco de exploración.

Este tema fue modificado por última vez hace 7 meses por. Este tema fue modificado por última vez hace 7 meses por.

(@kylewetton)

Hace 5 meses, 3 semanas

Hola @luxoperon, perdón por la respuesta tardía a este.

Básicamente, la diapositiva de comparación tomará el ancho de su padre. Entonces, si está en un contenedor de 800px de ancho, el control deslizante de comparación escalará ese ancho. Puede doblar todo el control deslizante en un div y establecer un tamaño de esa manera.

Por ejemplo

<div style="width: 420px">
... comparison slider stuff here
</div>

Dejame saber como te va

Esta respuesta fue modificada hace 5 meses, 3 semanas por.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada.