Un usuario preguntó 👇
Quiero que los tamaños de imagen sean receptivos en las publicaciones de mi blog (no en las páginas principales de mi sitio), especialmente para imágenes grandes orientadas a retratos.
Estoy usando WordPress 4.9.5 y el tema secundario de Pique (versión de Pique 1.4.2)
El comportamiento ideal que quiero:
– para tamaños de pantalla inferiores a 500 px, muestre la imagen en cuestión al 100% de ancho de columna. – para tamaños de pantalla mayores a 501px, muestre la imagen al 70% de ancho (o un ancho máximo de 600px – la columna principal máxima en un tema de Piqué es 857px) – Tal vez (pero imagino que necesito un plugin para esto) haga clic en las imágenes para verlas a tamaño completo en una caja de luz, si están reducidas.
Intenté agregar algo de CSS al tema de mi hijo:
@media screen and (max-width: 500px) {
.imgv {
width : 100% ;
}
}
@media screen and (min-width: 501px) {
.imgv {
max-width : 600px ;
}
}también probé:
@media screen and (min-width: 501px) {
.imgv {
max-width : 70% ;
}
}Luego agregué la clase CSS «imgv» a la imagen que quería modificar. Intenté hacer esto a través del campo «Clase CSS» en el cuadro de diálogo de edición de imágenes wysiwyg o manualmente directamente en el código html de la imagen, reemplazando la clase de tamaño de la imagen y también eliminando el ancho y alto de la codificación. En ambos casos, el nuevo CSS no se ha implementado y las imágenes aún se muestran en su tamaño completo incluso si maximizo la ventana.
A continuación, se muestra un ejemplo del código html predeterminado:
<img class="wp-image-3729 size-medium_large" src="https://lesbeauxebooks.com/wp-content/uploads/2018/05/certificat-768x1024.png" alt="Reproduction d'un tableau au format fluide" width="768" height="1024" /> Ceci n'est pas un tableau
Las imágenes en cuestión son 768x1024px (orientación vertical) cuando se configuran en «tamaño mediano», lo que significa mucho desplazamiento, pero el tamaño promedio es 225x300px, eso es demasiado pequeño para lo que quiero.
¿Puedo hacer esto con CSS personalizado? Si es así, ¿cómo puedo lograrlo? Si no es así, ¿podría recomendarme un buen plugin simple? Busqué plugins de imágenes receptivas, pero todos parecen ser para galerías / diapositivas receptivas, no imágenes individuales.
Lamentablemente, no puedo vincularlos directamente a la página porque el artículo aún no se ha publicado y preferiría no publicarlo hasta que lo haya editado. : Pero si se necesita más información, intentaré encontrar una solución. El sitio en cuestión está aquí: http://lesbeauxebooks.com
Gracias de antemano por cualquier ayuda que pueda brindar.
(@macmanx)
Moderador voluntario
Hace 2 años, 6 meses
Hay plugins para esto, como https://wordpress.org/plugins/wp-retina-2x/ o la imagen de Jetpack CDN: https://jetpack.com/support/photon/
(@ zelda013)
Hace 2 años, 6 meses
Hola James, muchas gracias por tu respuesta.
Sin embargo, no estoy seguro de que esos sean los plugins que busco. Estoy buscando una forma de modificar el contenido de la imagen de la página, dependiendo del tamaño de la pantalla, no una forma de crear imágenes de alta resolución para pantallas retina, que parece ser la característica principal de esos plugins. A menos que haya entendido un malentendido, en cuyo caso me disculpo. Es decir, necesito actuar sobre el CSS en lugar de los archivos de imagen.
Lo que realmente quiero: – un plugin que cambiará el CSS de la imagen, utilizando preguntas de los medios, o – una forma de agregar mis propias preguntas de los medios a la SEC y asegúrese de que se implementen (actualmente mi SEC no parece estar incluida).
Quizás una mejor manera de hacer mi pregunta es:
¿Cómo puedo anular el CSS generado que se usa para las imágenes importadas con el mío? Dado que solo es efectivo reemplazar las clases CSS en el código html.
¡Gracias por tu ayuda!
(@macmanx)
Moderador voluntario
Hace 2 años, 6 meses
Estoy buscando una forma de modificar el contenido de la imagen en la página, dependiendo del tamaño de la pantalla.
Jetpack image CDN hará exactamente eso por usted, automáticamente: https://jetpack.com/support/photon/
(@ zelda013)
Hace 2 años, 6 meses
Hola James, gracias de nuevo por el rompecabezas. Lamento reclamarlo, pero si no me falta algo, eso no es lo que quiero.
* No * quiero acomodar PELÍCULAS DE IMAGEN de diferentes tamaños dependiendo del tamaño de la página.
Quiero hacerlo INTRODUZCA LAS EXPLICACIONES EFECTIVAS en% del ancho total, dependiendo del tamaño de la página: 70% de ancho máximo para páginas más grandes, 100% de ancho para páginas más pequeñas.
Normalmente debería poder hacer esto con la pregunta de medios, pero mi código CSS no se está aplicando y no sé por qué.
¿Cómo puedo hacer que wordpress use mi código CSS, que mostré arriba en mi primera publicación?
(@ zelda013)
Hace 2 años, 6 meses
Creo que he resuelto mi problema.
El artículo aún no se ha publicado ya que primero estaba tratando de solucionar este problema de imagen. Lo publiqué ahora mismo y cuando revisé el enlace encontré un error 404. Después de algunas investigaciones preocupantes, me di cuenta de que mi categoría «cartera» (la categoría está en la URL) probablemente entraría en conflicto con la una función de «cartera» de wordpress (activada pero no utilizada). Al menos esta es mi suposición sobre lo que estaba sucediendo.
No estoy seguro de por qué la SEC no se implementó antes cuando era un selector simple, ya que me parece que aún debería funcionar. Ahora, sin embargo, la categoría fue renombrada como «proyectos» en lugar de «cartera» y agregué el selector explícito «artículo .entry-content .imgv» y mi pregunta sobre los medios CSS parece estar funcionando ahora. (Sin embargo, me gustaría poder mantener la categoría de «cartera», es más apropiado … bueno).
Si alguien quisiera ver a qué me refiero aquí está el artículo: http://lesbeauxebooks.com/projets/le-putain-d-enorme-projet/
¿Solucionó tu problema??
0 / 0