CSS 画像 Progate中級

Question

前提・実現したいこと

画像が小さくなってしまう

progateの中級道場コース３がわかりません

発生している問題・エラーメッセージ

エラーメッセージ

<div class="main-wrapper">
    <div class="container">
      <div class="heading">
       <h2>Learn Where to Get Started!!</h2>
      </div>
      <div class="lessons">
        <div class="lesson">
          <div class="lesson-icon">
           <img src="https://prog-8.com/images/html/advanced/html.png" />
           <p>HTML & CSS</p>
          </div>
          <p class="text">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
           <img src="https://prog-8.com/images/html/advanced/jQuery.png" />
           <p>jQuery</p>
          </div>
          <p class="text">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
           <img src="https://prog-8.com/images/html/advanced/ruby.png"  />
           <p>Ruby</p>
          </div>
          <p class="text">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
           <img src="https://prog-8.com/images/html/advanced/php.png" />
           <p>PHP</p>
          </div>
          <p class="text">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
        </div>
      </div>
    </div>
  </div>

.main-wrapper{
  text-align:center;
  height:580px;
  background-color:#f7f7f7;
}
.heading{
  padding-top: 80px;
  padding-bottom: 50px;
  color: #5f5d60;
}
.heading h2{
  font-weight: normal;
}
.lesson{
  float:left;
  width:25%;
}

.lesson-icon {
  position:relative;
}

.lesson-icon p{
  position:absolute;
  top:44%;
  width:100%;
  color:white
}
.text{
  font-size:13px;
  color:#b3aeb5;
  width:80%;
  padding-top:15px;
  display:inline-block;
}

試したこと

各要素のWidthを変えた
box-sizing:border-boxを使った
答えを写す

補足情報（FW/ツールのバージョンなど）

自分の画像

答え

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[ratarata]

ご指摘ありがとうございます
やります

Answer 1

画像自体にはクラスがついていないので画像にスタイルがなにもあたっていない状態です。

progateのことはあまり分かりませんが、以下のようにスタイルを当ててみてはいかがでしょうか。

.lesson-icon img {
  display: block;
  margin: auto;
  width: 75%;
}

Comments

[ratarata]

できました！
回答ありがとうございました！

Answer 2

画像にwidth等を指定していないからでは？

Comments

[ratarata]

できました！
回答ありがとうございました！

[kyoya0819]

どうやって解決したのでしょうか？

[ratarata]

画像をブロック要素にしてwidthを指定したらできました！