freeCodeCamp

2.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78b1367417b2b2512b09	Make an Image Responsive	0		Hacer una imagen receptiva

Description

Hacer que las imágenes respondan con CSS es realmente muy simple. En lugar de aplicar un ancho absoluto a un elemento: img { width: 720px; } Puedes usar:

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

La propiedad de max-width al 100% ajusta la imagen para que se adapte al ancho de su contenedor, pero la imagen no se estirará más que su ancho original. La configuración de la propiedad de display para bloquear cambia la imagen de un elemento en línea (su valor predeterminado) a un elemento de bloque en su propia línea. La propiedad de height de auto mantiene la relación de aspecto original de la imagen.

Instructions

Agregue reglas de estilo para la etiqueta img para que responda al tamaño de su contenedor. Debe mostrarse como un elemento de nivel de bloque, debe ajustarse a todo el ancho de su contenedor sin estirarlo y debe mantener su relación de aspecto original.

Tests

tests:
  - text: Su etiqueta <code>img</code> debe tener un <code>max-width</code> establecido al 100%.
    testString: 'assert(code.match(/max-width:\s*?100%;/g), "Su etiqueta <code>img</code> debe tener un <code>max-width</code> establecido al 100%.");'
  - text: Su etiqueta <code>img</code> debe tener un conjunto de <code>display</code> para bloquear.
    testString: 'assert($("img").css("display") == "block", "Su etiqueta <code>img</code> debe tener un conjunto de <code>display</code> para bloquear.");'
  - text: Tu etiqueta <code>img</code> debe tener una <code>height</code> establecida en auto.
    testString: 'assert(code.match(/height:\s*?auto;/g), "Tu etiqueta <code>img</code> debe tener una <code>height</code> establecida en auto.");'

Challenge Seed

<style>

</style>

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">

Solution

// solution required

2.3 KiB Raw Blame History