freeCodeCamp

1.9 KiB

Raw Blame History

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

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 del alto y ancho original:

<estilo>
img {altura: 250px; ancho: 250px; }
</style>
<img src = "coolPic500x500" alt = "Una imagen excelente">

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