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

矢印のあたりまでサイズを伸ばして、画面サイズを縮小しても、横のマージンが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>

行動規範の内容に同意します

回答1件

ベストアンサー

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

html
1<article class="article col-xs-12 col-sm-8">
2          <div class="article-box">
3            <div class="article-ttl">
4              <h1><?php the_title();?></h1>
5            </div>
6            <div class="article-bar">
7              <div class="article-bar-tag article-outline-tag blue">
8                <!-- <?php the_category('');?> -->
9              </div>
10              <!-- 更新日 -->
11              <div class="article-bar-time">
12                <p>更新日：<?php the_time('Y年m月d日'); ?></p>
13              </div>
14            </div>
15            <!-- 記事本文 -->
16            <div class="article-detail">
17              <!-- サムネ画像 -->
18              <div class="company-thumbnail">
19                <img class="img" src="<?php the_post_thumbnail(''); ?>" alt="">
20              </div>
21              <p><?php the_content();?></p>
22            </div>
23          </div>
24        </article>

CSS
1.article-detail {
2  margin: 0 10px;
3  text-align: center;
4}
5.company-thumbnail img{
6    border: 2px solid  #D1CCCC ;
7  }
8
9.img {
10  width: 100%;
11}

投稿2020/10/17 13:32

Larkiwing

総合スコア120

takawork

2020/10/17 14:07

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

行動規範の内容に同意します