2

しばらくの間私を悩ませているこの質問があります。レスポンシブ画像に関するチュートリアルやQ＆Aはたくさんありますが、適切なものは見つかりませんでした。ポートレート画像のサイズを、それらが含まれているコインテイナーの幅まで伸びないようにする方法を説明できます。

私が持っているもの：

私はWordPressを使用しており、スクリプトを使用して画像の幅と高さを削除します。

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

次に、添付ファイルをdivに配置するスクリプトを追加します（スタイリングの目的でのみ）。

add_filter('image_send_to_editor', 'wrap_my_div', 10, 8);

function wrap_my_div($html, $id, $caption, $title, $align, $url, $size, $alt){
    return '<div class="post-attachment">'.$html.'</div>';
}

そしてCSS：

img {
        width: 100%;
}

.post-attachment {
    width: 80%;
    margin: 0 auto;
}

これは風景画像に非常に効果的で、モバイルでも見栄えがします。しかし、100％コンテナの幅に合わせて拡大縮小しないように、縦長の画像を保持するにはどうすればよいでしょうか。幅を100％と宣言し、一部の画像を100％の幅ではなく、100％の高さにしたい場合は、その種の奇妙なことを知っています。

ここに画像の説明を入力してください

CSSの方法がない場合は、誰かがjqueryプラグイン（またはWPプラグインを使用したくないのですが）を提案してくれるかもしれません。または掘り下げるためのいくつかのリンク？

ありがとうございました。

4

2 に答える 2

3

width の代わりに、max-width を使用します。

img {
    max-width: 100%;
}

そうすれば、小さい場合は元のサイズになりますが、大きい場合は、囲んでいる親の境界内に保持されます。

于 2012-11-06T21:07:41.330 に答える
1

ポートレート画像を別のコンテナにラップすることはできませんか?

何かのようなもの

.imageBox {
    width: 50%;
    height: 100%;
    margin: 0 auto;
}

レスポンシブ CSS が正しく設定されている場合、これはデザインに合わせて正しくスケーリングされます。画像の幅を変更するだけです。

于 2012-11-06T19:50:18.590 に答える