¿Puedo cambiar la altura de una imagen en CSS: before /: after pseudo-elements?


251

Supongamos que quiero decorar enlaces a ciertos tipos de archivos usando una imagen. Podría declarar mis enlaces como

<a href='foo.pdf' class='pdflink'>A File!</a>

entonces tener CSS como

.pdflink:after { content: url('/images/pdf.png') }

Ahora, esto funciona muy bien, excepto si pdf.pngno es el tamaño correcto para mi texto de enlace.

Me gustaría poder decirle al navegador que escale la :afterimagen, pero por mi vida no puedo encontrar la sintaxis correcta. ¿O es esto como imágenes de fondo, donde el cambio de tamaño simplemente no es posible?

ETA: Me estoy inclinando hacia a) cambiar el tamaño de la imagen de origen para que sea del tamaño "correcto", del lado del servidor y / o b) cambiar el marcado para simplemente proporcionar una etiqueta IMG en línea. Estaba tratando de evitar ambas cosas, pero parece que serán más compatibles que intentar hacer cosas puramente con CSS. La respuesta a mi pregunta original parece ser "se puede clasificar de hacerlo, a veces".


1
¿Hay alguna razón convincente por la que no estás usando etiquetas 'img' con etiquetas 'a' envueltas alrededor de ellas? Esa es la sintaxis más típica para una imagen que también es un enlace. Digo esto porque incluso si logra que su método funcione, puede estar confundiendo a otros desarrolladores. CSS también tiene una sólida reputación de inconstancia entre navegadores / versiones.
Servy

44
Aprecio el problema, es solo que no necesariamente controlo la generación de marcado, en este caso solo puedo cambiar el estilo, no reestructurar.
Coderer el

Larga discusión sobre la lista de correo del W3C: lists.w3.org/Archives/Public/www-style/2011Nov/…
user123444555621

Respuestas:


375

background-sizeSe permite ajustar el . Sin embargo, aún debe especificar el ancho y la altura del bloque.

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

Consulte la tabla de compatibilidad completa en el MDN .


3
Esto es genial, excepto que la mayoría de nuestros clientes están en IE 7 u 8 (tonterías corporativas, lo siento).
Coderer el

14
Si ese es el caso, no deberías usarlo :afteren absoluto. No es compatible debajo de IE8.
Ansel Santosa

24
Esta técnica también requería configuración width: 10px; height: 20px;para ver la imagen.
aquí el

55
Para señalar también que esto realmente funciona, pero solo con la background-imagepropiedad específica , lo simple backgroundno funcionará.
Gruber

44
(Para :before) también necesitaba position: absolute, y left: -10px.
Hugo

95

Tenga en cuenta que el :afterpseudo-elemento es un cuadro, que a su vez contiene la imagen generada. No hay forma de darle estilo a la imagen, pero puedes darle estilo al cuadro.

Lo siguiente es solo una idea, y la solución anterior es más práctica.

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

Inconvenientes: necesita conocer las dimensiones intrínsecas de la imagen, y le deja un poco de espacio en blanco, que no puedo eliminar del cajero automático.


66
zoom: 0.5 también vale la pena considerar.
Alex

Me gusta la idea de esta solución, pero descarta el posicionamiento, especialmente en un escenario de bloqueo en línea. (IE 11)
Christopher Davies

1
El zoom no está bien soportado.

1
jsfiddle no está cambiando el tamaño. Estoy usando la última versión de Firefox. También probé el último ejemplo de jsfiddle en esta publicación usando zoom, y tampoco funciona.
Ryan

1
Solo una nota: en mi caso, tuve que ponerme position: absolutepara poder transform: scale(0.5)trabajar. También tuve que poner position: relativeel elemento "padre" (el dueño del :afterpseudo) por cordura. Además, tuve que agregar translate(-16px, -16px)a mi transformación para colocar el icono de 16x16 correctamente. El position: absolutetambién tiene el beneficio de eliminar el problema del espacio en blanco.
Braden Best

34

Como mi otra respuesta obviamente no fue bien entendida, aquí hay un segundo intento:

Hay dos enfoques para responder la pregunta.

Práctico (¡solo muéstrame la maldita foto!)

Olvídate del :afterpseudo-selector, y ve por algo como

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

Teórico

La pregunta es: ¿Se puede diseñar el contenido generado ? La respuesta es: no, no puedes. Ha habido una larga discusión sobre la lista de correo del W3C sobre este tema, pero hasta ahora no hay solución.

El contenido generado se representa en un cuadro generado, y puede diseñar ese cuadro, pero no el contenido como tal . Los diferentes navegadores muestran un comportamiento muy diferente.

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

Chrome cambia el tamaño del primero, pero utiliza las dimensiones intrínsecas de la imagen para el segundo

Firefox y, por ejemplo, no admiten el primero, y usan dimensiones intrínsecas para el segundo

Opera utiliza dimensiones intrínsecas para ambos casos

(de http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html )

Del mismo modo, los navegadores muestran resultados muy diferentes en cosas como http://jsfiddle.net/Nwupm/1/ , donde se genera más de un elemento. Tenga en cuenta que CSS3 aún se encuentra en una etapa temprana de desarrollo, y este problema aún no se ha resuelto.


1
@TJ Cada respuesta por separado merece una respuesta (si eso no es lo suficientemente obvio), que obtendrá diferentes cantidades de votos a favor y se verá / citará / compartirá de manera diferente según el contenido de la respuesta.
Timo Huovinen

13

Debes usar el fondo en lugar de la imagen.

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

6

diplay: block; no tiene ningún efecto

positionin también funciona de manera muy extraña para los elementos básicos de la interfaz, así que tenga cuidado

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}

4

Aquí hay otra solución (funcional): simplemente cambie el tamaño de sus imágenes al tamaño que desee :)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

necesita pdf.png para ser 20px * 10px para que esto funcione. Los 20px / 10px en el CSS están aquí para dar el tamaño del bloque para que los elementos que vienen después del bloque no estén todos desordenados con la imagen.

No olvides guardar una copia de la imagen en bruto en su tamaño original


¡Son chistes!
MD Ashik

3
.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px; 
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}

2

Puedes usar la zoompropiedad. Mira este jsfiddle


1
Al marcar el jsfiddle, ambos tienen el mismo tamaño y el zoom se resalta en rojo.
Ryan

No se redimensiona en Firefox 53 por el momento. Con suerte, esto se puede implementar en una versión posterior de Firefox. Es bueno saber que funciona en Chrome al menos. :-)
Ryan

2

Puede cambiar la altura o el ancho del elemento Antes o Después de esta manera:

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

1

Utilicé este ancho de control de tamaño de fuente

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

1

Hoy en día con flexbox puede simplificar enormemente su código y solo ajustar 1 parámetro según sea necesario:

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

Ahora puede ajustar el ancho del elemento y la altura se ajustará automáticamente, aumentará / disminuirá el ancho hasta que la altura del elemento esté en el número que necesita.


1
No funcionó para mí, tal vez porque la imagen es svg, tal vez porque el padre es un contenedor flexible.
Miguel Pynto

tampoco en un jpgurl(//placeimg.com/800/200/arch)
BananaAcid

0
content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.