Pregunta sobre SVG Support de Wordpress:

¿Cambiar el tamaño de SVG?

Un usuario preguntó 👇

Estoy usando Visual Composer para crear mi sitio web. He habilitado su plugin y muestra SVG sin problemas. Sin embargo, me pregunto si mis archivos SVG se pueden reducir. Si miras el enlace que adjunto la imagen en el encabezado, es demasiado grande. Intenté agregar una clase personalizada a la imagen y luego cambiar su tamaño usando CSS, pero aún así no tengo tanta suerte.

¿Es posible lo que quiero lograr? ¡Cualquier ayuda que pueda brindar sería excelente!

(@benbodhi)

Hace 3 años, 3 meses

Oye,

¡Gracias por usar mi plugin!

Miré rápido y, de hecho, puedes usar CSS para modificar los tamaños de tus imágenes SVG.

Hice uno rápido usando:

img.img-with-animation.animated-in {
    max-width: 60%;
}

Es posible que desee usar su propia clase en lugar de centrarse en tanto a la vez y, por supuesto, es posible que desee cambiar el tamaño, incluso por imagen, lo que requeriría clases diferentes cada uno. uno de ellos.

Personalmente, agregaría una clase personalizada a la imagen como svg-size-control y usa la SEC .svg-size-control { max-width: 60%; }

Espero que esto ayude.

Déjame saber cómo vas.

(@ onujpt24)

Hace 3 años, 3 meses

¡Gracias por la rápida respuesta! ¿Cómo agrego cada imagen individualmente al ejemplo .svg-size-control que usó?

No conozco demasiado la SEC. Lo siento.

Entonces, por ejemplo, si le di a esa imagen un nombre de clase «video»?

(@ onujpt24)

Hace 3 años, 3 meses

Ventilador. No te molestes con eso. Veo. svg-size-control sería el nombre de clase para él.

¡Le daré una oportunidad a esto!

(@benbodhi)

Hace 3 años, 3 meses

No lo menciones.

Daría una clase de cada imagen SVG svg-size-control como mencionaste usa video, pero es más relevante nombrar el primero.

Luego, simplemente pegue el siguiente bit en su hoja de estilo o área personalizada CSS en la administración:
.svg-size-control { max-width: 60%; }.

Luego, podría dar un paso más y darle a cada imagen otra clase adicional que sea más específica para la imagen individual como svg-video, svg-drone y luego apuntar a aquellos con un tamaño más específico en función de cada imagen.

Espero que tenga sentido.

(@ onujpt24)

Hace 3 años, 3 meses

¡Sentido pleno! No vuelvo a mi computadora por un tiempo. Si está bien, le haré saber cómo va en algunos.

(@benbodhi)

Hace 3 años, 3 meses

No hay problema 🙂

(@ onujpt24)

Hace 3 años, 3 meses

Está bien, le di la clase personalizada svg-size-control. En la configuración de administración de CSS utilicé el código: .svg-size-control { max-width: 60%; } y no parece cambiar nada en la página 🙁

Noto en la ubicación de la imagen individual del compositor visual, me obliga a configurar la imagen para tomar el 100% del ancho de la columna. ¿La SEC escribiría esto? Intenté cambiar esa línea de código al 60% … nada todavía.

Posible configuración temporal … Si hago que el tamaño de la columna sea 3/4 + 1/4 (en lugar de 1/2 + 1/2) obviamente hará que la imagen sea más pequeña. El 100% de la columna todavía, sin embargo, debido a que el ancho de la columna no es tan grande, hace que la imagen sea más pequeña.

Pensamientos

(@benbodhi)

Hace 3 años, 3 meses

Parece ser solo la especificidad de la SEC … así que hay algo que es básicamente una prioridad más alta.

Esto debería funcionar para ti:

.main-content img.svg-size-control {
    max-width: 60%;
}

(@ onujpt24)

Hace 3 años, 3 meses

¡¡¡Eso funcionó de maravilla !!!! Muchas gracias. Si no le importa … si tiene lo último … ¿alguna explicación de por qué esto solo hace el ancho máximo? ¿Por qué era necesario .main-content?

(@benbodhi)

Hace 3 años, 3 meses

No lo menciones.

El carácter distintivo de la SEC es uno de sus principios fundamentales como lenguaje. Básicamente, puede enfocarse en un aspecto como img, pero si le asigna una clase, entonces la clase tendrá una «especificidad» o una prioridad más alta que enfocarse en el elemento solo.

Por ejemplo, en su caso, ya existen estilos que se aplican a la .main-content imgy .main-content es un padre avanzado en img y, por lo tanto, su clase funcional. Entonces, para superar el código ya más alto y general, tuvimos que enfocarnos en la nueva clase dentro de la clase de elemento de mayor prioridad.

Si bien es un concepto bastante simple, puede ser necesaria una explicación sólida para comprenderlo.

Si realiza una búsqueda rápida sobre «especificidad CSS», verá un puñado de resultados que lo explican todo bien

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

¿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 *