Todos sabemos como usar los atributos para aplicar distintos estilos, marcar los links que van a determinado sitio, los que van a abrir una nueva ventana/pestaña, añadir un icono a los links que apunten a un .pdf… ( ) Se puede leer el origen, el alt, el title, el target, los data-, etc.
Tambien podemos usarlos para marcar de manera arbitraria ciertos contenidos sin necesidad de usar clases ni JS. Por ejemplo un widget de wordpress que permita añadir enlaces, pero no marcarlos arbitrariamente, tal vez no tienes acceso al codigo (o ni siquiera sabes php)
Puedes marcar esos links añadiendo un target “dummy” al final de la url, puede bastar un simple # vacío, normalmente será ignorado en la web de destino (a menos que la url necesite un id target) pero nos permite aplicarles estilo con
Pongamos que quieres o necesitas, por el motivo que sea, usar las mismas imagenes tanto en horizontal (desktop) como en vertical (phone), y lo apañas con objet-fit:cover y object-position:center , o bien usando sus equivalentes de background-image y background-position si necesitas dar soporte a Explorer y browsers antiguos, para el caso es lo mismo.
Y te encuentras con el problema de que ciertas imágenes tienen el punto de interés desplazado a un lado y lo pierdes en móvil, o en la parte superior y se pierde en desktop. Resulta que le estas cortando la cabeza a esa modelo tan guapa de la tercera imagen de tu slide.
Podrías arreglarlo aplicándoles una clase especial a esas imágenes lo que te obligaría en la mayoría de los casos a añadir un campo nuevo en tu gestor de contenidos para aplicarla, si es que tienes la posibilidad de hacerlo, que a lo mejor ni siquiera tienes acceso por ser una libreria externa.
Tampoco puedes hacer algo como .slide li:nth-child(3) porque te dejaria de funcionar al borrar o insertar una nueva imagen, o si se aplica un random al orden de slides.
Bueno, pues no hace no hace falta usar clases especificas, puedes señalar esas imágenes utilizando su propio nombre para identificarlas utilizando el lector de atributos de CSS.
Con suerte, tu gestor de contenidos permitira añadirle un “alt text” donde podemos colocar nuestras “falsas clases” y leerlas con [src*= “”] , con este selector podemos identificar cadenas de texto inscritas en el nombre (en la ruta, en la realidad) de la imagen. En concreto, el operador * lo que hace es buscar la cadena citada en cualquier lugar del atributo, también podemos añadir más precisión usando otros operadores como ^, $, |… que buscan la cadena al inicio, al final, como cadena completa, etc. tenéis la lista completa y mas información en el link anterior. Para la mayoría de los casos con * es suficiente.
Por ejemplo en una imagen horizontal con el punto de interés a un lado podemos añadir los sufijos @left o @right (u otros) en el nombre de la imagen y al mostrarla en vertical identificarla en el css y posicionarla en consecuencia:
img {
object-position:center center;
}
img[src*="@right"] {
object-position: right center;
}
img[src*="@left"] {
object-position:left center ;
}
Una solución limpia y sencilla como deben ser siempre en CSS y que no complican nuestra base de datos. La imagen de la chica que mencionabamos antes ahora acaba en @top y se muestra correctamente en desktop.
Podemos combinar propiedades con variables CSS de esta manera
.screen img{
width:100%;
height:100%;
object-fit:cover;
--originx: center;
--originy: center;
object-position:var(--originx) var(--originy);
}
.screen img[src *= "@r"]{
--originx: right;
}
.screen img[src *= "@l"]{
--originx: left;
}
.screen img[src *= "@t"]{
--originy: top;
}
.screen img[src *= "@b"]{
--originy: bottom;
}
Así podríamos hacer algo como imagen@l@t.jpg para localizar puntos de interés en las esquinas.
Ejemplito en codepen:
Podemos marcar imagenes “en origen” para aplicar variaciones de composicion en logos con una relacion de apecto demasiado extrema en un directorio de empresas, por ejemplo, o en definitiva cualquier ocasion donde no podamos añadir clases arbitrariamente pero podamos editar el contenido.
No es la solucion mas bonita del mundo pero es un recurso para casos extremos.
