問題タブ [fluid-images]

これは簡単な質問ではないかもしれませんが、最善を尽くします。

このサンプル サイトがあります: http://lotvonen.tumblr.com/ 内部ブラウ​​ザー ウィンドウの高さを自動的に計算し、その数値をイメージ ラッパー div の高さとして設定する小さな JavaScript があります。ラッパー内の画像の高さはラッパーの 100% であるため、すべての通常の画面サイズでフルスクリーンの画像を取得できます。これは、高さよりも幅の広い画面 (デスクトップ、ラップトップなど) でうまく機能します。

しかし！

幅よりも高さが長い画面 (スマートフォン、iPad など) では、画像が横から切り取られます。私はそれを望まないので、ブラウザ画面の最大幅が 1024 の場合、クリッピングが発生しないように、メディアクエリで高さを auto に、幅を 100% に割り当てるという一時的な解決策があります。しかし、これはあまり良い解決策ではなく、特定の解像度で壊れます。また、解像度が低い (800x600 など) と私の JS が破壊されます。

JS は次のとおりです。

ここに私のCSSがあります：

そしてここにdivがあります：

ブラウザ ウィンドウが幅よりも高くなっている場合 (例: 720x1024)、画像が幅によって調整され、ブラウザ ウィンドウが高さよりも幅が広い場合 (例: 1024x720) に画像が調整されるようにするにはどうすればよいですか?今（高さで、JSで）。これはまったく可能ですか？これに対する簡単な CSS 修正はありますか、それとも JS をもっといじる必要がありますか?

前もって感謝します！

Chrome と Safari で、コンテナー イメージの上にロールオーバー div を正しく表示する際に問題が発生しています。私が行ったことは時々うまくいきますが、ページのサイズを変更すると、ロールオーバー div と画像コンテナの間に 1 ～ 2 ピクセルの小さなギャップが見られることがあります。

ここでデモを作成しました: http://jsfiddle.net/eJNsS/9/

スクリーンショット

HTML

CSS

jQuery

助けてくれてありがとう

サイズ変更可能な 内に流動的な画像を収めようとしていDIVます。画像は縦横比を維持し、100% (幅と高さの両方) を超えないようにする必要がありDIVます。

また、画像は水平方向と垂直方向の両方で中央に配置する必要があります。Chrome と Safari はこれを完全に行いますが、Internet Explorer 10 はそうではありません。

問題を説明するために簡単なjsfiddleを設定しました。

HTML:

そしてCSS：

Chrome でボックスのサイズを幅と高さの 100% 未満に変更すると、次の画像のような結果が得られます。

100% 未満の高さ:

100% 未満の幅:

ただし、Internet Explorer 10 は高さのみをスケーリングします。幅が 100% を下回ることはありません。これが主な問題です。

Chrome/Safari と同様に IE で幅をスケーリングできますが、DIV高さ (はい、高さ) を 10px などの低い値に設定する必要があります。

javascript で画像を動的にスケーリングできることは知っていますが、Internet Explorer がスケーリングを正しく処理できるはずの場合、余分な javascript が必要になるとは思いません。

Safari / Firefox で画像の間隔に問題があります。私はサイトのモバイル版に取り組んでおり、すべての画像はパーセンテージベースの幅を使用しているため、レスポンシブです。

Safari / Firefox では、何らかの理由で、連絡先バー (フッター) に間隔の問題があります。Chrome では完全に動作しますが、Safari では「地図」画像の右側に黒いスペースがあり、Firefox では「地図」画像の左側に黒いスペースがあります。

フッター コンテナーの幅にまたがる 7 つの画像があり、それらの幅を合計すると 100% になります (3 つの画像は 10%、3 x 20%、1 x 30%)。

ここで見ることができます

www.conchandmedia.com/new_mobile/index3.html

最大幅は設定されていないため、ブラウザのサイズを電話の幅に合わせてください。

これを引き起こしている原因についての提案は素晴らしいでしょう。

ありがとう

私が取り組んでいるレスポンシブ プロジェクトに流動的な画像を使用しようとしています。ただし、私が見たものはすべて、画像の最大幅を設定するように指示されただけで、機能するはずです。ここに示すように、px ベースのコンテナー幅を除いて、機能します: http://codepen.io/anon/pen/cCfsF

px ベースの親が流動的なイメージを持つことは可能ですか?

私のHTMLコードは次のとおりです。

私のCSSは次のとおりです。

まず、このコードの一部だけを書きました。これは単一の html ファイルで、ニュースレターとして人々に郵送されます。私はここでテーブルを使用しています。私が知る限り、それがこれまでに得た最良のオプションですか? さて、その問題は私のイメージです。通常は img{max-width: 100%;} を使用するため、画像がドキュメントの端を上書きすることはなく、自動的に縮小されます。テーブルを使用すると、これを機能させることができません。非常に厄介なコードで申し訳ありません。繰り返しますが、私はそれを書きませんでした:)

ここにもプレビューへのリンクがあります

私は2人のユーザーがいるウェブサイトを持っています

問題 a. ユーザー A はバナー画像を追加しません。そのため、プロフィール画像を拡大する必要があります。拡大すると歪みます。

問題b。ガウスぼかしを追加する方法

問題 c. その画像を流動的にするにはどうすればよいですか

コードイグナイター PHP

あなたが助けてくれることを願っています