質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.62%

phpでthumbnailの画像サイズの縦幅がautoで自動調整できない

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 105

score 13

wordpress,php初心者です。indexページに記事一覧をつくるため、事前に準備したhtml,cssにphpコードを入力しました。
すると、サムネイルの縦幅のみ自動調整されず、解決策がわからずにいます。
phpを入れる前は、自動調整されていました。画像のサイズ変更について調べたところ、cssで調整という結果しかわからず、解決の糸口が全くわからなくなってしまいました。
お詳しいみなさま、ご教授ください。よろしくお願い申し上げます。

元の画像
イメージ説明

PHPを入れた崩れた画像
イメージ説明

HTML

<?php
$query = new WP_Query(
    array(
        'post_type' => 'post',
        'posts_per_page' => 3,
        'category__in' => array( 4 ),
    )
);
?>
<?php
if ( $query->have_posts() ) : ?>
<div class="flex_blog-box">
<?php while ( $query->have_posts() ) : $query->the_post();?>
<div class="flex_blog-item">
  <div class="cp_card04">
    <div class="photo">
    <?php
  if(has_post_thumbnail()):
    the_post_thumbnail();
  else:
?>
<img src="<?php echo get_template_directory_uri(); ?>/images/top-header-s.jpg" alt="画像なし" />
<?php endif; ?>

    </div>
    <div class="details">
        <div class="category"><p><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></p></div>
        <div class="date"><span class="day"><?php the_time('Y年n月j日'); ?></span></div>
    </div>
    <div class="description">
        <h1><?php the_title(); ?></h1>
        <div class="text">
            <p><?php the_excerpt(); ?></p>
            <a href="<?php the_permalink(); ?>" class="">Read More</a>
        </div>
    </div>
  </div>
</div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
</div>

css

 .flex_blog-box,.flex_blog-box2 {
    padding:  10px;             
    display: flex;              
    flex-wrap: wrap;            
    justify-content:center;
}

.flex_blog-box {
    background-color: #F4F4F4; 
}

.flex_blog-box2 {
    background-color: #fff; 
}



.flex_blog-item {
    width: calc(33% - 40px);
    padding: 10px;
    margin:  10px;              
}


@media screen and (max-width: 767px) {
.flex_blog-item  {
        width: calc(50% - 16px);
        padding: 5px;
        margin:  3px; 
    }
}

 /* blogカードデザイン
 ------------ */


  .cp_card04 {
    overflow: hidden;
    border-radius: 3px;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: #fff;
    -webkit-box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
            box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
                    transition: all 0.25s ease-in;
                  border-bottom: 5px solid transparent;
}
.cp_card04 .photo {
    max-width: 100%; 
    height: auto;/*--- ここが効きません ---*/
}



.cp_card04:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  border: none;
  border-bottom: 5px solid #ABE3E3;
}
.cp_card04 .details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1em 1em 0 1em;
    font-size: 0.8em;
}
.cp_card04 .date {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    text-align: right;
}
.cp_card04 .category {
    -webkit-box-flex: 2;
        -ms-flex: 2;
            flex: 2;
}
.cp_card04 .category p {
    font-size: 0.8em;
    padding: 2px 8px;
    cursor: pointer;
    width: 8em;
    margin: 0;
    margin-bottom: 0.5em;
    border-radius: 0px;
    background: #ABE3E3;
    text-align: center;
    color: #ffffff;
}
.cp_card04 .description {
    padding: 0 1em;
}
.cp_card04 .description h1 {
    font-size: 1.2em;
    margin: 0;
    margin-bottom: 0.5em;
}
.cp_card04 .description .text p {
    margin: 0;
    font-size: 0.8em;
}
.cp_card04 .description a {
    float: right;
    margin-bottom: 10px;
    text-decoration: none;
    color: #8F2474;
}
.cp_card04 .description a:after {
    font-family:"Font Awesome 5 Free";
    margin-left: -10px;
    content: '\f35a';
    -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
    vertical-align: middle;
    opacity: 0;
}



.cp_card04 .description a:hover:after {
    margin-left: 5px;
    opacity: 1;
}

その他、必要な情報があれば掲載します。また、不自然な箇所があればご指摘いただければ幸いです。

【追記1】
左側:投稿のthumbnailの場合、画像が崩れてしまいます。
右側:画像なしのときに表示するアイキャッチ画像は、イメージ通りの表示ができができます。

イメージ説明

表示が崩れているソースコードを確認したところ、画像が崩れているほうは、どこから現れたのか100vwという表記がありました。考えられる対策は、ありますか?

【崩れている左側の画像】

<div class="photo">
    <img width="800" height="450" src="http://my-design.local/wp-content/uploads/2021/09/gajoen-S__48111621.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="http://my-design.local/wp-content/uploads/2021/09/gajoen-S__48111621.jpg 800w, http://my-design.local/wp-content/uploads/2021/09/gajoen-S__48111621-300x169.jpg 300w, http://my-design.local/wp-content/uploads/2021/09/gajoen-S__48111621-768x432.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" />    </div>

【追記2】
アドバイスを頂いて、object-fitを追記した結果、画像のような結果になりました。
文字が重ならないようにする方法がわからないため、教えて下さい。

イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

以下で試してみてください。

.cp_card04 .photo {
    max-width: 100%; 
    height: 200px; //お好きなサイズに指定
}

.cp_card04 .photo img {
    object-fit: cover;
}

object-fitに関する参考サイトを貼っておきます。
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/09/14 12:50

    jun26様、object-fitについてご教授くださり、ありがとうございました。参考リンクもありがとうございます。
    追記した結果、画像(質問文に追加)のような表示となりました。文字と重ならない方法がわからず苦戦しております。

    キャンセル

  • 2021/09/15 09:47

    上記コード入力後、表示されたのが追記2の方の画像で大丈夫でしょうか?
    そうしましたら、.cp_card04 .detailsのbackground-colorを#fffで指定してみてください。

    キャンセル

  • 2021/09/15 22:45

    引き続きアドバイスくださり、ありがとうございます。残念ながら、表示の結果は追記2と変わらずでした。
    一つ気になっていることは、通常であれば画面サイズの変化によって、画像が自動で変化するところ、画像の縦幅だけは変わらず(height:auto;にした場合も、サイズを指定した場合も)、横幅のみ画面に合わせて変化します。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る