freeCodeCamp/use-a-retina-image-for-higher-resolution-displays.spanish.md at fcced4a6c3a9d797badd2dadeabd7c23e0ad967c

Files

Beau Carnes fcced4a6c3 docs: add Spanish docs

2018-10-08 13:34:43 -04:00

1.9 KiB

Raw Blame History

id, title, localeTitle, challengeType, videoUrl

id	title	localeTitle	challengeType	videoUrl
587d78b1367417b2b2512b0a	Use a Retina Image for Higher Resolution Displays	Utilice una imagen de retina para pantallas de mayor resolución	0

Description

La forma más sencilla de hacer que sus imágenes aparezcan como "retina" (y optimizarlas para las pantallas de retina) es definir sus valores de width y height como solo la mitad de lo que es el archivo original. Aquí hay un ejemplo de una imagen que solo usa la mitad de la altura y el ancho originales:

<style>
img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">

Instructions

Establezca el width y el height de la etiqueta img en la mitad de sus valores originales. En este caso, tanto la height original como el width original son 200 px.

Tests

tests:
  - text: Su etiqueta <code>img</code> debe tener un <code>width</code> de 100 píxeles.
    testString: 'assert($("img").css("width") == "100px", "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.");'
  - text: Su etiqueta <code>img</code> debe tener una <code>height</code> de 100 píxeles.
    testString: 'assert($("img").css("height") == "100px", "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.");'

Challenge Seed

<style>

</style>

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">

Solution

// solution required

1.9 KiB Raw Blame History