Pregunta sobre AMP for WP - Accelerated Mobile Pages de Wordpress:

Una imagen de 100 vw no está enfocada en la imagen de la página

Un usuario preguntó 👇

Hola, noté cuando se usan imágenes más pequeñas en el contenido de la página; y para estar alineado en el centro no alinee el centro. Esto sucede, por ejemplo, al visualizar una ventana gráfica de 640x360x y otra.

Este parece ser el problema de «100vw» dentro del estilo de imagen. Una ‘v’ o ‘w’ de este sitio parece resolver el problema.

A continuación, se muestra un ejemplo de un código:

<div id="attachment_10298" class="wp-caption aligncenter amp-wp-inline-ad925cc1b1f15b9e578d0bdbbf9c63cd"><a href="http://www.sheilds.org/nebosh/"><amp-img class="amp-img wp-image-10298 size-full i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" src="https://www.sheilds.org/wp-content/uploads/2015/01/nebosh-acc11-500px.png" alt="NEBOSH accredited center 548" width="500" height="200" srcset="http://www.sheilds.org/wp-content/uploads/2015/01/nebosh-acc11-500px.png 500w, http://www.sheilds.org/wp-content/uploads/2015/01/nebosh-acc11-500px-300x120.png 300w, http://www.sheilds.org/wp-content/uploads/2015/01/nebosh-acc11-500px-450x180.png 450w" sizes="(max-width: 500px) 100vw, 500px" style="width: 100vw;"><i-amphtml-sizer style="display: block; padding-top: 40%;"></i-amphtml-sizer><img alt="NEBOSH accredited center 548" class="i-amphtml-fill-content i-amphtml-replaced-content" src="https://www.sheilds.org/wp-content/uploads/2015/01/nebosh-acc11-500px-450x180.png"></amp-img></a><p class="wp-caption-text">Show all NEBOSH courses</p></div>

Notará en dos lugares que se usa «100vw».

En etiqueta de estilo:

style="width: 100vw;"

y dentro de una etiqueta de tamaño:

sizes="(max-width: 500px) 100vw, 500px"

Los archivos con esta configuración son:

wp-content / plugins / accelerated-mobile-pages / includes / vendor / amp / includes / sanitizers / class-amp-base-sanitizer.php line 85 Como se comentó en wp-content / plugins / accelerated-mobile-pages / includes / vendor / amp / templates / style.php línea 31 Comentario sobre páginas móviles aceleradas incluye vendor amp back-compat templates-v0-3 style.php línea 54

Intenté editar estos archivos, pero sigo luchando con el problema. ¿Alguna posibilidad de que esto se solucione?

Algunas cosas adicionales que noto:

El problema de la alineación no tan central solo ocurre cuando las imágenes son relativamente pequeñas, digamos unos pocos cientos de píxeles de ancho. Si se utiliza una imagen más grande, esto no parece ser un problema y la imagen está centralizada.

El problema no ocurre al girar la ventana gráfica; y la imagen en el medio.

Tengo reglas CSS adicionales para alinear correctamente las imágenes principales con los archivos adjuntos y los subtítulos; estas reglas no interfieren en absoluto con el código generado a partir de un plugin acelerado de página móvil; Eliminé mis reglas personalizadas y el problema persistió.

Se agradecería cualquier ayuda, pero parece ser un error.

Gracias

(@marqas)

Hace 3 años, 3 meses

Hola @stevepb,

También puede agregar esto aquí: https://wordpress.org/support/topic/new-version-custom-css-under-the-design-option-still-doesnt-work/

(@ampforwp)

Hace 3 años, 2 meses

Hola @stevepb,

¿Todavía tienes alguna pregunta?

(@stevepb)

Hace 3 años, 2 meses

Hola, todavía tengo la pregunta. Este problema afecta a las imágenes de la página.

No puedo actualizar a la versión lanzada recientemente (0.9.6.2) porque elimina completamente mi sitio (página en blanco en blanco) mientras actualizo, así que tuve que volver a la versión: 0.9.6.1.

Observo que si se utiliza una imagen fina, es decir, una imagen de altura pequeña pero amplia, se produce este problema. Si la imagen está por encima de la relación alto-alto x ancho (cuadrado más grande o más alto que ancho), el problema no ocurre.

Gracias

Esta respuesta fue modificada hace 3 años, 2 meses por.

(@ alex246)

hace 3 años

También tengo esta pregunta.

Tan pronto como elimine esto – (ancho máximo: 219px) 100vw, 219px La imagen vuelve a lo que debería ser para su escritorio.

¿Alguna ayuda sobre esto?

Gracias

(@mohammed_kaludi)

hace 3 años

¿Puedes compartir la URL donde tienes esta pregunta?

(@stevepb)

hace 3 años

Aquí hay una URL, que adolece de los problemas informados con las imágenes:
http://www.sheilds.org/amp/

Estoy usando la versión 0.9.71

(@mohammed_kaludi)

hace 3 años

@stevepb Estoy empezando a entender la pregunta ahora. Tengo dos dudas, límpielas amablemente.

Mira esta imagen: http://take.ms/KLWF5

1) ¿Entonces la imagen pequeña está alineada a la izquierda como se muestra en esta imagen?

2) ¿y agregaste este CSS para que sea central?

Házmelo saber para que lo entienda y cree un ticket para esto. Me aseguraré de que este problema se resuelva.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *