Imágenes de Diseño Web Responsivo

Tabla de contenido

Cambie el tamaño de la ventana del navegador para ver cómo se escala la imagen para ajustarse a la página.

Usando la propiedad `width`

Si la propiedad ancho se establece en un porcentaje y la propiedad height está establecida en "auto", la imagen será Responsivo y escalable hacia arriba y hacia abajo:

Ejemplo

img {
  width: 100%;
  height: auto;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>

</body>
</html>

Observe que en el ejemplo anterior, la imagen se puede ampliar para que sea más grande. que su tamaño original. Una mejor solución, en muchos casos, será utilizar el propiedad max-width en su lugar.

Usando la propiedad `max-width`

Si la propiedad max-width está establecida en 100%, la imagen se reducirá si es necesario, pero nunca se ampliará para ser más grande que su tamaño. tamaño original:

Ejemplo

img {
    max-width: 100%;
  height: auto;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>

<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale when the width is less than 460px.</p>

</body>
</html>

Agregue una imagen a la página web de ejemplo

Ejemplo

img {
    width: 100%;
  height: auto;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
}

.row:after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  width: 100%;
}

@media only screen and (min-width: 600px) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <img src="img_chania.jpg" width="460" height="345">
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>What?</h2>
      <p>Chania is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Chania airport from all over Europe.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

Imágenes de fondo

Las imágenes de fondo también pueden responder al cambio de tamaño y escala.

Aquí mostraremos tres métodos diferentes:

1. Si la propiedad tamaño de fondo está configurada en "contener", la imagen de fondo se escalará e intentará ajustarse al área de contenido. Sin embargo, la imagen mantendrá su relación de aspecto (la relación proporcional entre el ancho y el alto de la imagen):

Aquí está el código CSS:

Ejemplo

div {
  width: 100%;
  height: 400px;
  
background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>

2. Si la propiedad tamaño de fondo está configurada en "100% 100%", la imagen de fondo se ampliará para cubrir toda el área de contenido:

Aquí está el código CSS:

Ejemplo

div {
  width: 100%;
  height: 400px;
  
background-image: url('img_flowers.jpg');
  
background-size: 100% 100%;
  border: 1px solid red;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>

3. Si la propiedad tamaño de fondo está configurada en "cubrir", la imagen de fondo se escalará para cubrir toda el área de contenido. Tenga en cuenta que el valor de "portada" mantiene la relación de aspecto y es posible que parte de la imagen de fondo se recorte:

Aquí está el código CSS:

Ejemplo

div {
  width: 100%;
  height: 400px;
  
background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>

Diferentes imágenes para diferentes dispositivos

Una imagen grande puede ser perfecta en una computadora grande pantalla, pero inútil en un dispositivo pequeño. ¿Por qué cargar una imagen grande cuando ¿Tienes que reducirlo de todos modos? Para reducir la carga, o por cualquier otro motivo, puede utilizar consultas de medios para mostrar diferentes imágenes en diferentes dispositivos.

Aquí hay una imagen grande y una imagen más pequeña que se mostrarán en diferentes dispositivos:

Ejemplo

/* For width smaller than 400px: */
body {
  background-image: 
url('img_smallflower.jpg'); 
}
/* 
For width 400px and larger: */
@media only screen and (min-width: 400px) 
{
  body { 
    background-image: url('img_flowers.jpg'); 
    }
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For width smaller than 400px: */
body {
  background-repeat: no-repeat;
  background-image: url('img_smallflower.jpg'); 
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
  body { 
     background-image: url('img_flowers.jpg'); 
  }
}
</style>
</head>
<body>

<p style="margin-top:360px;">Resize the browser width and the background image will change at 400px.</p>

</body>
</html>

Puede utilizar la consulta de medios min-device-width, en lugar de min-width, que comprueba el ancho del dispositivo, en lugar del ancho del navegador. Entonces la imagen no cambiará cuando cambie el tamaño de la ventana del navegador:

Ejemplo

/* For devices smaller than 400px: */
body {
  background-image: 
url('img_smallflower.jpg'); 
}
/* 
For devices 400px and larger: */
@media only screen and (min-device-width: 400px) 
{
  body { 
    
background-image: url('img_flowers.jpg'); 
  }
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For device width smaller than 400px: */
body {
  background-repeat: no-repeat;
  background-image: url('img_smallflower.jpg'); 
}

/* For device width 400px and larger: */
@media only screen and (min-device-width: 400px) {
  body { 
     background-image: url('img_flowers.jpg'); 
  }
}
</style>
</head>
<body>

</body>
</html>

El elemento HTML

El elemento HTML <picture> proporciona a la web Los desarrolladores tienen más flexibilidad a la hora de especificar recursos de imágenes.

El uso más común de <picture> El elemento será para imágenes utilizadas en diseños responsivos. en lugar de tener uno imagen que se amplía o reduce según el ancho de la ventana gráfica, se pueden estar diseñado para llenar mejor la ventana gráfica del navegador.

El elemento <picture> funciona de manera similar al <video> y <audio> elementos. Configuras diferentes fuentes, y la primera fuente que se ajuste a las preferencias es el que se está utilizando:

Ejemplo

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 
400px)">
  <source srcset="img_flowers.jpg">
  <img 
src="img_flowers.jpg" alt="Flowers">
</picture>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

<p>Resize the browser width and the background image will change at 400px.</p>

</body>
</html>

El atributo srcset es obligatorio y define el origen de la imagen.

El atributo media es opcional y acepta las consultas de medios que encuentre en Regla CSS @media.

También debe definir un elemento <img> para navegadores que no admiten el Elemento <picture>.

Imágenes de Diseño Web Responsivo

Tabla de contenido

Usando la propiedad width

Ejemplo

Usando la propiedad max-width

Ejemplo

Agregue una imagen a la página web de ejemplo

Ejemplo

Imágenes de fondo

Ejemplo

Ejemplo

Ejemplo

Diferentes imágenes para diferentes dispositivos

Ejemplo

Ejemplo

El elemento HTML

Ejemplo

Usando la propiedad `width`

Usando la propiedad `max-width`