Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 469

Visitas el mes pasado: 715

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




5. Imágenes (I)

5.1 Tamaño de imagen

css

Control del tamaño desde CSS o desde HTML

Hemos visto cómo controlar el tamaño de la imagen desde el propio código HTML, incluyendo en la etiqueta de imagen los atributos width y height.

Con el código CSS también podemos controlar el tamaño de las imágenes mediante las propiedades width (ancho) y height (alto) las cuales veremos a continuación. Estas propiedades nos permiten mostrar la imagen con cualquier anchura y altura, independientemente de su altura o anchura real.

No obstante si utilizamos anchuras y alturas con distintas proporciones a las reales, la imagen puede quedar distorsionada, con un desagradable resultado estético.

Sin embargo controlar el tamañó de la imagen con CSS puede que en ocasiones no resulte práctico, ya que puede ser que cada imagen de la página tenga un tamaño distinto, lo que nos obliga a crear un selector distinto para cada imagen en el código CSS, lo cual implica que en el código HTML deberíamos poner un atributo de clase distinto para cada imagen; todo esto puede sobrecargar demasiado el código.

En estos casos es mucho más simple utilizar en el cödigo HTML los atributos width y height para cada imagen, tal como se explica en la página 5.1. Insertar imágenes del manual de HTML.

Sin embargo si tenemos una serie de imágenes, todas del mismo tamaño, (por ejemplo un album de fotos familiar), sí que puede ser más conveniente utilizar el código CSS.


Propiedades width y height

Las Propiedades width y height Se emplean no sólo con imágenes, sino que pueden emplearse también para definir el ancho y el alto de otras partes del documento, bien sea párrafos, columnas, etc. Esto lo veremos en temas posteriores. De momento vamos a definir estas propiedades.

La propiedad width

width Anchura
Valores <medida> | <porcentaje> | auto | inherit
Descripción Establece la anchura de un elemento
Valor inicial auto
se aplica a Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla

La Propiedad height

height Altura
Valores <medida> | <porcentaje> | auto | inherit
Descripción Establece la altura de un elemento
Valor inicial auto
se aplica a Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla

Las medidas que se utilizan como valores pueden indicarse en cualquier unidad ya vista para otros elementos de la página. Los porcentajes vienen referidos respecto al elemento que lo contiene, si no no hay elemento contenedor, se entiende que éste es la página. Para más información sobre medidas y porcentajes en CSS puedes ver la página 1.4. Colores y medidas de este mismo manual.

En las imágenes, si sólo indicamos uno de los dos valores (ancho o alto) el otro automáticamente cambia para conservar las proporciones originales de la imagen. Esto es una ventaja, pues no necesitamos calcular el valor de la otra propiedad para que la imagen conserve su proporción.

Cuando el elemento contenedor es la propia página la altura no puede indicarse en porcentaje, ya que en este caso el navegador ignora esta orden.


Ejemplo de album de imágenes

En el siguiente ejemplo se muestra una serie de imágenes, todas del mismo tamaño a las que se le ha aplicado las propiedades width y height. Veamos primero el código del ejemplo:

<html>
<head>
   <title>Ejemplo de imágenes</title>
   <style type="text/css">
      * { text-align: center; }
      h1 { font-family: arial; text-align: center;}
      p { font-family: arial; text-align: justify; margin: 25px;}
      img {width: 300px; height: 225px ; margin: 10px; }
   </style>
</head>
<body>
   <h1>Album de imágenes de ejemplo</h1>
   <p>Este es un album de imágenes de ejemplo en el que todas las imágenes
      tienen el mismo tamaño, y por lo tanto se le puede aplicar el mismo 
      código CSS a todas ellas.</p>
   <img src="imagen1.jpg" alt="imagen1">
   <img src="imagen2.jpg" alt="imagen2">
   <img src="imagen3.jpg" alt="imagen3">
   <img src="imagen4.jpg" alt="imagen4">
   <img src="imagen5.jpg" alt="imagen5">
   <img src="imagen6.jpg" alt="imagen5">
</body>
</html>

Por supuesto, tendremos que haber guardado las imágenes en la misma carpeta que el archivo HTML, para poder verlas. La página del siguiente ejemplo de album de imágenes nos quedará así:

Ver página ejemplo





En La siguiente página trataremos la posición de la imagen en la página.

Posición de imagen.



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com