1

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?

1
  • 1
    Con CSS no cambias el tamaño de la imagen, sino de la visualización. Puedes tener una imagen de 5000px de lado y mostrarla en un cuadrito de 5px, pero seguirá midiendo y pesando sus 5 mil px. ¿Quieres modificar el tamaño de la visualización de la imagen o quieres cambiar el tamaño (y peso) de la imagen?.
    – toledano
    el 19 ago. 2017 a las 12:37

3 respuestas 3

5

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!

2

En css puedes cambiar las dimensiones de un objeto con las propiedades:

width: 10px;

heigth: 10px:

Por ejemplo, tenemos una imagen de la clase foto, para asignarle un tamaño de 300 px de ancho y alto se haria:

.foto{
    width: 300px;
    heigth: 300px;
}

Aqui te dejo un enlace con la documentacion de css de todas las unidades que puedes usar.

0

Con width y heigth puedes lograrlo que modican el ancho y la altura de la imagen.

En el ejemplo que hay, la imagen 328x328 y con css se modificoa 50x50. Si haces hover sobre la imagen, se cambiara a 150x150 y si le haces click a 100x100:

img{
 width:50px;
 height:50px;
}
img:hover{
 width:150px;
 height:150px;
}
<img src="https://i.stack.imgur.com/gNFQ3.png?s=328&g=1" />

1
  • 2
    Pero solo funcionaría (correctamente) si la escala de la imagen es 1:1, lo mejor es definir tan solo el alto o el ancho, ya que CSS calculará el lado restante sin desescalarlo.
    – lromeraj
    el 19 ago. 2017 a las 14:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.