diff --git a/curriculum/challenges/spanish/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.spanish.md index 7447ecefec..2218278ca7 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.spanish.md @@ -7,7 +7,16 @@ localeTitle: 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.
+
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: + +```css +img { + max-width: 100%; + display: block; + height: 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.
@@ -18,11 +27,11 @@ localeTitle: Hacer una imagen receptiva ```yml tests: - text: Su etiqueta img debe tener un max-width establecido al 100%. - testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your img tag should have a max-width set to 100%.");' + testString: 'assert(code.match(/max-width:\s*?100%;/g), "Su etiqueta img debe tener un max-width establecido al 100%.");' - text: Su etiqueta img debe tener un conjunto de display para bloquear. - testString: 'assert($("img").css("display") == "block", "Your img tag should have a display set to block.");' + testString: 'assert($("img").css("display") == "block", "Su etiqueta img debe tener un conjunto de display para bloquear.");' - text: Tu etiqueta img debe tener una height establecida en auto. - testString: 'assert(code.match(/height:\s*?auto;/g), "Your img tag should have a height set to auto.");' + testString: 'assert(code.match(/height:\s*?auto;/g), "Tu etiqueta img debe tener una height establecida en auto.");' ```