He agregado la misma imagen destacada a las 4 páginas en una página de inicio de Twenty Seventeen. Esto funciona bien, excepto por el espacio/relleno/fondo no deseado, o como se llame, tanto arriba como debajo de la imagen. Mis imágenes destacadas tienen aproximadamente 2000 W x 400 H (probablemente no sea lo ideal, sin embargo, estoy usando fragmentos de fotogramas de un video que se reproduce en el encabezado, es decir, quiero el mismo ancho, etc.).
Entiendo que el tamaño del contenedor es obviamente más alto que mi imagen, aunque sospecho que debería poder usar CSS para hacer ajustes sin preocuparme por el contenedor real.
Hasta ahora tengo:
/* Panel Image */
.panel-image {
height: 150px;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: 100px;
background-size: 100%;
position: relative;
}Si uso background-size: cover; , el espacio/relleno/fondo no deseado se elimina, sin embargo, los extremos de la imagen no se muestran, es decir, la imagen se recorta o se amplía de manera efectiva; Entiendo llenar el contenedor.
Con otra configuración, que no recuerdo, logré ver la imagen completa, sin embargo, se duplicó para llenar el espacio, es decir, una imagen debajo de la otra, aunque especifiqué que no se repita.
Soy relativamente nuevo tanto en wordpress como en CSS, aunque he tenido éxito ajustando muchas otras configuraciones de CSS en Twenty Seventeen, aunque después de una docena de horas parece que no puedo resolver este problema.
Todas las sugerencias serían muy apreciadas.
Franco
Este tema fue modificado hace 1 mes, 2 semanas por
. Razón: formato de código arreglado