freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.chinese.md

id, title, challengeType, videoUrl, forumTopicId, localeTitle

id	title	challengeType	videoUrl	forumTopicId	localeTitle
587d78b1367417b2b2512b09	Make an Image Responsive	0	https://scrimba.com/c/cPp7VfD	1	使图片根据设备尺寸自如响应

Description

用 CSS 来让图片自适应其实很简单。不要使用绝对单位： img { width: 720px; } 你应该使用：

img {
  max-width: 100%;
  display: block;
  height: auto;
}

max-width 属性能让图片以 100% 的最大宽度适应其父容器的宽度，但图片不会拉伸得比原始宽度还宽。把 display 属性值设置为 block，将 image 标签从内联元素（默认值）更改为块级元素。设置 height 属性为 auto 保持图片的原始宽高比。

Instructions

给 img 标签增加样式规则使它自适应容器尺寸。应声明为块级元素，应适应它容器的宽度，应保持原本的宽高比。

Tests

tests:
  - text: '<code>img</code> 标签应设置 <code>max-width</code> 为 100%。'
    testString: 'assert(code.match(/max-width:\s*?100%;/g), ''<code>img</code> 标签应设置 <code>max-width</code> 为 100%。'');'
  - text: '<code>img</code> 标签应设置 <code>display</code> 为 block。'
    testString: assert($('img').css('display') == 'block', '<code>img</code> 标签应设置 <code>display</code> 为 block。');
  - text: '<code>img</code> 标签应设置 <code>height</code> 为 auto。'
    testString: 'assert(code.match(/height:\s*?auto;/g), ''<code>img</code> 标签应设置 <code>height</code> 为 auto。'');'

Challenge Seed

<style>
  
</style>

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">

Solution

// solution required