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++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:

Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 236
Visitas el mes pasado: 831
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
GRACIAS
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquà mismo se enseñan.
By Anyelguti
5. Imágenes (I)
5.1 Tamaño de imagen
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í:
En La siguiente página trataremos la posición de la imagen en la página.
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com