画像サイズを横いっぱいに表示するにはどうすれば良いですか？

Question

矢印のあたりまでサイズを伸ばして、画面サイズを縮小しても、横のマージンが10pxを保てるようにしたいのですが、
画像サイズがこれが最大でうまく行きません。
どうしたら良いでしょうか？

.article-detail {
  margin: 0 10px;
  text-align: center;
}
.company-thumbnail img{
    border: 2px solid  #D1CCCC ;
  }

<article class="article col-xs-12 col-sm-8">
          <div class="article-box">
            <div class="article-ttl">
              <h1><?php the_title();?></h1>
            </div>
            <div class="article-bar">
              <div class="article-bar-tag article-outline-tag blue">
                <!-- <?php the_category('');?> -->
              </div>
              <!-- 更新日 -->
              <div class="article-bar-time">
                <p>更新日：<?php the_time('Y年m月d日'); ?></p>
              </div>
            </div>
            <!-- 記事本文 -->
            <div class="article-detail">
              <!-- サムネ画像 -->
              <div class="company-thumbnail">
                <?php the_post_thumbnail(''); ?>
              </div>
              <p><?php the_content();?></p>
            </div>
          </div>
        </article>

Answer 1

こんな感じでいかがでしょうか？

<article class="article col-xs-12 col-sm-8">
          <div class="article-box">
            <div class="article-ttl">
              <h1><?php the_title();?></h1>
            </div>
            <div class="article-bar">
              <div class="article-bar-tag article-outline-tag blue">
                <!-- <?php the_category('');?> -->
              </div>
              <!-- 更新日 -->
              <div class="article-bar-time">
                <p>更新日：<?php the_time('Y年m月d日'); ?></p>
              </div>
            </div>
            <!-- 記事本文 -->
            <div class="article-detail">
              <!-- サムネ画像 -->
              <div class="company-thumbnail">
                <img class="img" src="<?php the_post_thumbnail(''); ?>" alt="">
              </div>
              <p><?php the_content();?></p>
            </div>
          </div>
        </article>

.article-detail {
  margin: 0 10px;
  text-align: center;
}
.company-thumbnail img{
    border: 2px solid  #D1CCCC ;
  }

.img {
  width: 100%;
}

Comments

[takawork]

.img {
width: 100%;
}
だと全ての要素にかかってしまうのですが、
.article-detail {
margin: 0 10px;
text-align: center;
}
.company-thumbnail img{
border: 2px solid #D1CCCC ;
width: 100%;
height: 100%:
}
で解決しました。ありがとうございます。