2.3 KiB
2.3 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78b1367417b2b2512b09 | Make an Image Responsive | 0 | Hacer una imagen receptiva |
Description
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
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