iphone6/7/8のレスポンシブ対応で画像が小さく見えない

Question

前提・実現したいこと

iphone6/7/8のレスポンシブ対応が画像はかなり小さくこまめサイズになります。

教えていただけると幸いです。m(__)m

該当のソースコード

 <section class="works">
      <div class="container works-container">
        <p class="jp-ttl">制作実績</p><!-- /.jp-ttl -->
        <p class="en-ttl">works</p><!-- /.en-ttl -->
               <!-- <div class="aos-init aos-animate" data-aos="zoom-in-up">-->
                <ul id="slider" class="works-list aos-init aos-animate" data-aos="zoom-in-up">
                    <!--1-->
                    <li class="works-item">
                        <div class="works-txt">
                            <p class="work-ttl">コーディングカンファレンスのイベント LPの制作を行いました！</p>
                            <div class="info">
                                <dt>採用技術：</dt>
                                <dd> jQuery,WordPress</dd>
                                <dt>実装期間：</dt>
                                <dd>4週間/dd>
                                <dt>担当コーダー：</dt>
                                <dd>石井</dd>
                            </div>
                        </div>
                        <div class="works-img">
                            <img src="./image/work1-unsplash.png" alt="">
                        </div>
                    </li>
                    <!--2-->
                    <li class="works-item">
                        <div class="works-txt">
                            
                                <p class="work-ttl">株式会社サンプル様採用サイトのコーデ ィングを行いました！</p>
                                <div class="info">
                                    <dt>採用技術：</dt>
                                    <dd>jQuery,Bootstrap4</dd>
                                    <dt> 実装期間：</dt>
                                    <dd>2週間</dd>
                                    <dt> 担当コーダー：</dt>
                                    <dd>石井</dd>
                                </div>
                            
                        </div>
                        <div class="works-img">
                            <img src="./image/works2-digital_1280.png" alt="">
                        </div>
                    </li>
                    <!--3-->
                    <li class="works-item">
                        <div class="works-txt">
                            <p class="work-ttl">株式会社サンプル様通販サイトのコーデ ィングを行いました！</p>
                            <div class="info">
                                <dt>採用技術：</dt>
                                <dd>jQuery,Bootstrap4</dd>
                                <dt>実装期間：</dt>
                                <dd> 6週間</dd>
                                <dt>担当コーダー：</dt>
                                <dd>石井</dd>
                            </div>
                        </div>
                        <div class="works-img">
                            <img src="./image/works3-unsplash.png" alt="">
                        </div>
                    </li>
                    <li class="works-item">
                        <div class="works-txt">
                                <p class="work-ttl">株式会社サンプル様採用サイトのコーデ ィングを行いました！</p>
                                <div class="info">
                                    <dt>採用技術：</dt>
                                    <dd>jQuery,Bootstrap4</dd>
                                    <dt> 実装期間：</dt>
                                    <dd>2週間</dd>
                                    <dt> 担当コーダー：</dt>
                                    <dd>石井</dd>
                                </div>
                        </div>
                        <div class="works-img">
                            <img src="./image/works2-digital_1280.png" alt="">
                        </div>
                    </li>
                  
                </ul>    
            </div><!--aos-init / -->
        </div><!-- /.container -->    
        </section>

.works {
  background-color: #fff;
  width: 1366px;
  height: 700px;
}

.works-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
}

.works-list .works-item {
  width: 100%;
  height: 58%;
  border: 1px solid #DDDDDD;
  border-radius: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  margin: 68px 27px 90px 27px;
}

.works-list .works-item .works-txt {
  padding-left: 18px;
}

.works-list .works-item .works-txt .works-ttl {
  display: block;
}

.works-list .works-item .works-txt .info {
  padding-top: 30px;
  padding-bottom: 40px;
  font-size: 1.4rem;
}

.works-list .works-item img {
  padding-bottom: 18px;
}

試したこと

width,heightをitem px/全体のpx*100%
で計算しました。なぜなら、画面の小ささと共に親要素も縮小できるからです。なので、それぞれのアイテムも
デバイスの大きさに対応しながら、適応サイズになると判断し、考えました。