トリミングなしで可能な限り大きな投稿の注目画像を表示する、フルスクリーンのモバイルフレンドリーなテーマを作成しようとしています。これは、横向きではそれらをheight:100%; width:auto;
で表示しますが、縦向きではそれらを表示することを意味しますwidth:100%; height:auto
。(多くのiOSアプリと同様です。)
問題は、WordPressでこれを機能させるのに時間がかかるという本当のバガーがいることです。テーマを静的HTMLテストサイトとして開発したとき、すべてが完全に正常に機能しました。しかし、どういうわけか、サイトをテーマに変換すると、縦向きの幅100%を無視し始めました。
同じポートレートメディアクエリ内にあるナビゲーションメニューが正常に機能するため、壊れている/無視されているのはメディアクエリ自体ではないことを私は知っています。
当初、WordPressのインライン画像サイズがレスポンシブサイズを上書きしたと思っていましたが(カスケード的には意味があります)、画像は横向きのビューポートで高さ100%で正常に表示されるため、そうではないようです。ポートレートでは、height:autoコマンドをリッスンしているようです。
width: 100%;
無視されているのは文字通りコマンドだけです。
max-width: 100%
また、念のために追加して、さまざまな場所で!importantを試してみました。無効。
これがコードで、ばかげたセミコロンが欠落していないことがわかります。
#content img {
width:100%;
max-width:100% !important;
height:auto;
}
CSSも検証しましたが、何も問題はないようです。
そしてこれがHTMLです
<div id="content">
<div title="Click to flip" class="sponsor">
<div class="sponsorFlip">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
</div>
<div class="sponsorData" style="display:none">
<?php
if( class_exists( 'kdMultipleFeaturedImages' ) ) {
kd_mfi_the_featured_image( 'featured-image-2', 'post' );
}
?>
</div>
</div>
</div><!-- End div #content -->
&ここにいくつかのスクリーンショットがあります。
お願いします、ああお願いします、誰かが私の肖像画の問題から私を救ってください。