web-dev-qa-db-ja.com

最初のものを除くすべての<img>タグを削除します画像サイズを変更します-タグコンポーネント

Context:タグページ(私が話しているタグページは、タイトルのすぐ下にあるタグをクリックしたときに表示されるページです。記事)、記事ごとに1つの画像のみを表示したいので、

  • イントロ画像がある場合、記事の画像は削除されます
  • イントロ画像がない場合、記事の最初の画像のみが表示されます

問題:イントロ画像が含まれている記事の真下にあるタグのページが記事の画像のサイズ以下のように見える場合(ここでは記事3 )

  • 記事1:画像はHTMLです(イントロテキスト)
  • 記事2:画像はイントロ画像です
  • 記事3:画像がHTMLである(イントロテキスト)
  • 記事4:画像はHTMLです(イントロテキスト)

画像サイズはwidth="456" height="140"(デフォルト)ですが、代わりにwidth="624" height="340"

助けが必要です:画像のサイズが変更されないようにする方法を見つけようとしています。

これが私のコードです

<?php 
    if (!empty($images->image_intro)) {                     
        $item->core_body= strip_tags( $item->core_body, '<p>');
    }                   
    else {
        $item->core_body= preg_replace('/\<img/','****',$item->core_body,1);
        $item->core_body= strip_tags( $item->core_body, '<p>');
        $item->core_body= str_replace('****','<img',$item->core_body);                  
    }                   
?>

問題を修正するために私が行ったこと:画像の高さと幅が設定されていないという事実にリンクしている可能性があると思いましたHTMLですが、以下の部分だけをテストしても、画像のサイズは変わりません。だから問題はどこかにあるようです。

<?php
   $item->core_body= preg_replace('/\<img/','****',$item->core_body,1);
   $item->core_body= strip_tags( $item->core_body, '<p>');
   $item->core_body= str_replace('****','<img',$item->core_body);
?>

ここ は実際の例です:2番目の記事(小屋のある黄色の図面のすぐ下の記事)を探します。 2番目と3番目の記事の画像は同じ幅であると想定されています。

2
MagTun

記事に挿入する画像の元のサイズを使用したい場合は、これは質問に正確に答えるものではありませんが、次のことに注意してください。

CSSを使用すると、ページの視覚的な部分をいつでも操作できます。

Cssファイル(例:template.css)内の以下のcssのようなものが機能し、タグページに表示されるすべての画像の最大幅を設定します。

[〜#〜] css [〜#〜]

.tag-category .list-striped li img {
    max-width: 456px;
    width:100% !important;
}

更新:

小さな改善として、次のルールを追加することもできます。幅:100%!重要; -したがって、画像はさまざまな画面サイズにも対応します。 *上記のCSSコードを更新しました。 *実際には、これを行う私の方法:完全にスタイルを設定して、ページに希望のレイアウトを与えるには、CSSを使用します。パフォーマンスを考慮して、画像のhtmlサイズのみを考慮します。

2
FFrewin

あなたの例には1つの画像しかありません。 HTMLでサイズを指定しない限り、画像は自然なサイズで表示されます。 HTMLでサイズを指定しないでください。必要なサイズで画像をアップロードしてください。それでおしまい。

1
Seth Warburton