Tamaño de una imagen

publicado por: Anonymous

Tengo una pregunta cuya solucion es un poco dificl, pero es que buscando y buscando no consigo encontrar la solución (o yo no se aplicarla).

La pregunta básicamente es ¿Como dar tamaños a una imagen desde CSS?

La cosa es que yo se poner imagenes sin problemas, pero no se modificarle el tamaño desde CSS.

Mi solución hasta ahora, es pasarla por photoshop y ponerle allí el tamaño que yo quiero, pero considero muchísimo más comodo, tener una simple imagen y en función de donde la quieras poner, darle un ancho y alto.

¿Como lo haceis vosotros?

solución

Tienes 3 maneras de darle tamaño o estilo a esa imagen. Eso si, que sepas que adecuar el tamaño de imagen mediante photoshop u otra aplicación es ideal para que ocupe lo mínimo el archivo. Ya que una imagen de 1900px X 1900px modificado mediante CSS a 50px X 50px se visualiza pequeño pero ocupa igual que 1900px X 1900px con las consecuencia que tiene (ocupa espacio, tarda en cargar, etc.). Por lo tanto primero te recomiendo ajustar el tamaño del archivo original.

Para adecuar el tamaño mediante CSS o darle otros estilos interesantes como border o transparencias, se puede hacer de 3 maneras diferentes:

1) Estilos CSS En la misma etiqueta IMG

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <img style="width:50px; height:50px;" src="imagenes/imagen1.jpg"/>
  </body>
</html>

2) Estilos CSS En el head

 <!DOCTYPE html>
    <html>
      <head>
        <style type="text/css">
          img{
          width:50px;
          height:50px;
          } 
        </style>
      </head>
      <body>
        <img src="imagenes/imagen1.jpg"/>
      </body>
    </html>

3) Estilos CSS mediante archivo externo enlazado

 <!DOCTYPE html>
    <html>
      <head>
    <link href="css/estilos.css"
          rel="stylesheet" type="text/css">
      </head>
      <body>
        <img src="imagenes/imagen1.jpg"/>
      </body>
    </html>

Con el archivo por ejemplo llamado estilos.css por ejemplo en un directorio en la raiz llamada css, para que la ruta sea la indicada: css/estilos.css

Y en su contenido:

img{
    width:50px;
    height:50px;
   } 

¿Y si tengo 2 o más IMG que quiero darles diferentes tamaño o estilo?

Puedes obvservar que en el caso 2 y 3 hemos utilizado la misma etiqueta img como identificador para darle el estilo css. Si hay una sola imagen no hay problema, pero si tienes 2 o más imágenes a los que quieres dar diferentes tamaños, esta manera te habrá dado el mismo tamaño a todos los elementos con etiqueta img. Para evitar eso puedes añadir a cada elemento o etiqueta img un identificador id o class para después darle estilo diferente a cada imagen o elemento. Te pongo los ejemplos:

4) Estilos CSS En el head con identificador CLASS en la etiqueta IMG

 <!DOCTYPE html>
    <html>
      <head>
        <style type="text/css">
          .imagen1{
          width:50px;
          height:50px;
          } 
          .imagen2{
          width:60px;
          height:60px;
          } 
        </style>
      </head>
      <body>
        <img class="imagen1" src="imagenes/imagen1.jpg"/>
        <img class="imagen2" src="imagenes/imagen1.jpg"/>
      </body>
    </html>

5) Estilos CSS mediante archivo externo enlazado con identificador CLASS en la etiqueta IMG

<!DOCTYPE html>
    <html>
      <head>
    <link href="css/estilos.css"
          rel="stylesheet" type="text/css">
      </head>
      <body>
        <img class="imagen1" src="imagenes/imagen1.jpg"/>
        <img class="imagen2" src="imagenes/imagen2.jpg"/>
      </body>
    </html>

Con el archivo por ejemplo llamado estilos.css por ejemplo en un directorio en la raiz llamada css, para que la ruta sea la indicada: css/estilos.css

Y en su contenido:

.imagen1{
    width:50px;
    height:50px;
   } 
.imagen2{
    width:60px;
    height:60px;
   } 

¿CLASS es igual a ID? ¿Cuál utilizo?

Has podido observar que CLASS se identifica en la hoja de estilo con un punto. Se puede hacer lo mismo con ID pero después en vez de un punto debes utilizar una #. Te funcionará igual. ¿Cuál es la diferencia? ID se debe utilizar para un sólo elemento, y CLASS puedes utilizarlo para más de un elemento a los que les quieras dar el mismo estilo o características.

Si tienes cualquier duda me comentas.

¡Saludos y a disfrutar!

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *