Files

camperbot 5c868af2b8 chore(i18n,learn): processed translations (#44851 )

2022-01-20 20:30:18 +01:00

2.0 KiB

Raw Permalink Blame History

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d78b1367417b2b2512b09	画像をレスポンシブにする	0	301140	make-an-image-responsive

--description--

CSS で画像をレスポンシブにするのは、実は非常に簡単です。次のプロパティを画像に追加するだけです:

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

max-width を 100% にすることで画像が決してそれが入っているコンテナより広がらないようにし、height を auto にすることで画像が元のアスペクト比を保つようにします。

--instructions--

responsive-img クラスにスタイルルールを追加し、これをレスポンシブにします。コンテナ (この場合はプレビューウィンドウ) の幅より広がらないようにし、かつ元のアスペクト比を維持する必要があります。コードを追加したら、画像の動作を確認するためにプレビューのサイズを変更してみましょう。

--hints--

responsive-img クラスは max-width を 100% に設定する必要があります。

assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');

responsive-img クラスは height を auto に設定する必要があります。

assert(code.match(/height:\s*?auto;/g));

--seed--

--seed-contents--

<style>
.responsive-img {


}

img {
  width: 600px;
}
</style>

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

--solutions--

<style>
.responsive-img {
  max-width: 100%;
  height: auto;
}

img {
  width: 600px;
}
</style>

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

2.0 KiB Raw Permalink Blame History