web-dev-qa-db-ja.com

画像の寸法を指定する

私は自分のウェブサイトのパフォーマンスレポートを（ GTmetrix を使って）実行しましたが、画像の寸法が設定されていないことに気付きました、そしてheightおよびwidth属性の指定を逃しました。テーマには既にいくつかの画像がありますが、それらはデフォルトでは指定されていません。どうやってそれらを指定することができますか、そしてもっと重要なことに、属性heightとwidthをどこで指定するのですか？

<div class="thumb">
    <a class="clip-link" data-id="1" title="Hello world!" href="http://example.com/hello-world/">
    <span class="clip">
        <img src="http://example.com/wp-content/themes/beetube/images/nothumb.png" alt="Hello world!" />
        <span class="vertical-align"></span>
    </span>
theme-developmentimagesimage-size
2
user4153112

あなたのテーマのfunctions.phpファイルにあなたが追加することができます

add_image_size( 'thumb', 600, 350, true );
add_image_size( 'thumbnil', 600, 350, true );
add_image_size( 'medium', 600, 350, true );
add_image_size( 'large', 600, 350, true );
add_image_size( 'post-thumbnail', 600, 350, true );

add_image_size( '{custom-image-type}', 600, 350, true );

詳細については http://codex.wordpress.org/Function_Reference/add_image_size をご覧ください。

3
jacobwarduk

WordPressサイト全体のすべての画像に適切なwidthおよびheight属性が設定されていることを確認する自動化されたソリューションをお探しの場合は、次のプラグインが対応します。 画像の寸法を指定 。

次のように、ソースコードを見て、代替として独自のfunctions.phpに追加できます。

add_action( 'plugins_loaded', 'factmaven_spcimg_buffer', 10, 1 );

function factmaven_spcimg_buffer() { // Enable output buffering for our function
    ob_start( 'factmaven_spcimg_specify_image_dimensions' );
}

function factmaven_spcimg_specify_image_dimensions( $content ) { // Automatically insert width and height attributes
    if ( is_admin() && ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX ) ) { // Don't run the function in the admin panel
        return $content;
    }

    preg_match_all( '/<img[^>]+>/i', $content, $images );
    if ( count( $images ) < 1 ) { // Don't change content if there are no images
        return $content;
    }

    foreach ( $images[0] as $image ) {
        preg_match_all( '/(src|alt|title|class|id|width|height)=("[^"]*")/i', $image, $img );
        if ( !in_array( 'src', $img[1] ) ) {
            continue;
        }
        if ( !in_array( 'width', $img[1] ) || !in_array( 'height', $img[1] ) ) {
            $src = $img[2][array_search( 'src', $img[1] )];
            $alt = in_array( 'alt', $img[1] ) ? ' alt=' . $img[2][array_search( 'alt', $img[1] )] : '';
            $title = in_array( 'title', $img[1] ) ? ' title=' . $img[2][array_search( 'title', $img[1] )] : '';
            $class = in_array( 'class', $img[1] ) ? ' class=' . $img[2][array_search( 'class', $img[1] )] : '';
            $id = in_array( 'id', $img[1] ) ? ' id=' . $img[2][array_search( 'id', $img[1] )] : '';
            list( $width, $height, $type, $attr ) = getimagesize( str_replace( "\"", "" , $src ) );

            $image_tag = sprintf( '<img src=%s%s%s%s%s width="%d" height="%d" />', $src, $alt, $title, $class, $id, $width, $height );
            $content = str_replace( $image, $image_tag, $content );
        }
    }
    return $content;
}
0
Ethan Jinks O'Sullivan

ヤコブの答えは質問の半分を取り上げています。他の半分のために：

gT Metrixの警告は、HTMLで幅と高さを指定する必要があるという意味ではありません。つまり、適切なスペースを確保する必要があり、イメージをロードしたときにブラウザがページをリフローして再描画する必要がないということです。

その上、寸法をハードコードすると、それは敏感な振る舞いを破ることになります。レイアウトがレスポンシブでない場合は問題ありませんが、レスポンシブを維持したい場合は、CSSのみを使用して結果を得ることができます。

ほとんどの場合、widthとmax-width:100の両方を使ってもうまくいきますが、 Smashing Magazineからのこの記事 には興味深いテクニックがあります：max-width：100％の代わりに The Padding-Bottom Hack ：

この手法では、高さを幅に対する尺度として定義します。パディングとマージンにはそのような固有の特性があり、内容を含まない要素のアスペクト比を作成するためにそれらを使用できます。パディングにはこの機能があるので、padding-bottomを要素の幅に比例するように設定できます。高さも0に設定すると、必要なものが得られます。 [...]

次のステップは、コンテナー内にイメージを配置し、それがコンテナーを埋め尽くすようにすることです。これを行うには、画像をコンテナの内側に絶対配置する必要があります。

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

それが役に立てば幸い。

0
Celso Bessa