Mucha gente usa CSS para ajustar el texto, cambiando la fuente, el color, el tamaño y más. Pero una cosa que mucha gente olvida a menudo es que también se puede usar CSS con imágenes.

Cambiar la imagen por sí misma

CSS le permite ajustar la forma en que la imagen se muestra en la página. Esto puede ser muy útil para mantener la coherencia de sus páginas. Al establecer estilos en todas las imágenes, usted crea un aspecto estándar para sus imágenes. Algunas de las cosas que puedes hacer:

• Agregar un borde o contorno alrededor de las imágenes
• Eliminar el borde coloreado alrededor de las imágenes vinculadas
• Ajuste de la anchura y/o altura de las imágenes
• Agregar una sombra
• Girar la imagen
• Cambiar los estilos cuando se pasa el ratón por encima de la imagen

Darle un borde a tu imagen es un buen punto de partida. Pero debe tener en cuenta algo más que el borde: piense en todo el borde de la imagen y ajuste también los márgenes y el relleno. Una imagen con un borde negro delgado se ve bien, pero si se agrega un poco de relleno entre el borde y la imagen, se puede ver aún mejor.

img {
de la frontera: 1px negro sólido;
acolchado: 5px;

Es una buena idea vincular siempre las imágenes no decorativas, cuando sea posible. Pero cuando lo haga, recuerde que la mayoría de los navegadores agregan un borde de color alrededor de la imagen. Incluso si utiliza el código anterior para cambiar el borde, el enlace lo anulará a menos que elimine o cambie el borde en el enlace también. Para ello, debe utilizar una regla hija CSS para eliminar o cambiar el borde alrededor de las imágenes enlazadas:

img> a {
frontera: ninguna;

También puede utilizar CSS para cambiar o establecer la altura y el ancho de sus imágenes. Aunque no es una buena idea usar el navegador para ajustar el tamaño de las imágenes debido a la velocidad de descarga, están mejorando mucho el tamaño de las imágenes para que se vean bien. Y con CSS puede configurar sus imágenes para que sean de un ancho o alto estándar o incluso establecer las dimensiones para que sean relativas al contenedor.

Recuerde, cuando cambie el tamaño de las imágenes, para obtener mejores resultados, sólo debe cambiar el tamaño de una dimensión: la altura o el ancho. Esto hará que la imagen mantenga su relación de aspecto, por lo que no parece extraña. Configure el otro valor en automático o déjelo fuera para indicar al navegador que mantenga la relación de aspecto constante.

img {
ancho: 50%;
Altura: auto;
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>)

CSS3 ofrece una solución a este problema con las nuevas propiedades object-fit y object-position. Con estas propiedades podrá definir la altura y el ancho exactos de la imagen y cómo debe manejarse la relación de aspecto. Esto puede crear efectos de buzón alrededor de las imágenes o recortar para que la imagen se ajuste al tamaño requerido.

Aunque las propiedades de ajuste de objeto y posición de objeto de CSS3 aún no son ampliamente soportadas, hay otras propiedades de CSS3 que son bien soportadas en la mayoría de los navegadores modernos que puede usar para modificar sus imágenes. Cosas como sombras, esquinas redondeadas y transformaciones para rotar, inclinar o mover las imágenes, todo funciona ahora mismo en la mayoría de los navegadores modernos. A continuación, puede utilizar transiciones CSS para hacer que las imágenes cambien al pasar el puntero del ratón sobre ellas, al hacer clic sobre ellas o justo después de un período de tiempo.

Uso de imágenes como fondos

CSS facilita la creación de fondos elegantes con sus imágenes. Puede añadir fondos a toda la página o sólo a un elemento específico. Es fácil crear una imagen de fondo en la página con la propiedad background-image:

cuerpo {
> imagen de fondo: url(background.jpg);

Cambie el selector de cuerpo a un elemento específico en la página para poner el fondo en un solo elemento.

Otra cosa divertida que puedes hacer con las imágenes es crear una imagen de fondo que no se desplace con el resto de la página, como una marca de agua. Sólo tienes que usar el estilo de archivo adjunto de fondo: fijo, junto con tu imagen de fondo. Otras opciones para sus fondos incluyen hacerlos azulejar sólo horizontal o verticalmente usando la propiedad background-repeat. Write background-repeat: repeat-x; to tile the image horizontally and background-repeat: repeat-y; to tile verticaltically. Y puede posicionar su imagen de fondo con la propiedad background-position.

Y CSS3 añade más estilos para sus fondos también. Puede estirar las imágenes para que se ajusten a cualquier tamaño de fondo o establecer la imagen de fondo a escala con el tamaño de la ventana. Puede cambiar la posición y luego recortar la imagen de fondo. Pero una de las mejores cosas de CSS3 es que ahora se pueden crear múltiples capas de imágenes de fondo para crear efectos aún más intrincados.

HTML5 Ayuda a Estilizar Imágenes

El elemento FIGURA en HTML5 debe colocarse alrededor de cualquier imagen que pueda estar sola dentro del documento. Una forma de pensar es si la imagen podría aparecer en un apéndice, entonces debería estar dentro del elemento FIGURA. A continuación, puede utilizar ese elemento y el elemento FIGCAPTION para añadir estilos a sus imágenes.