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 {
ancho máximo: 100%;
bloqueo de pantalla;
altura: auto;
}

La propiedad de max-width del 100% ajusta la imagen para que se ajuste 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), "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.");'
  - text: Su etiqueta <code>img</code> debe tener un conjunto de <code>display</code> para bloquear.
    testString: 'assert($("img").css("display") == "block", "Your <code>img</code> tag should have a <code>display</code> set to block.");'
  - text: Tu etiqueta <code>img</code> debe tener una <code>height</code> establecida en auto.
    testString: 'assert(code.match(/height:\s*?auto;/g), "Your <code>img</code> tag should have a <code>height</code> set to 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