Baidu Map API を使用すると、ホームページ上の大きな画像がモバイルブラウザーの div をバーストします_html/css

Baidu Map API を使用すると、ホームページ上の大きな画像がモバイルブラウザーの div をバーストします_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:58:47

オリジナル

1207 人が閲覧しました

理由はこれです
最近会社の Web サイトで作業していて、横暴な地図を作りたいと思ったので、Baidu API を思い出しました
その後、Web サイトにアクセスしてコードを見つけました。残念ながら、最大幅は 567px までです。
しかし、これはコードの専門家にとってはまったく良いことではありません問題は、私のような初心者もソースコードを変更する方法を知っているということです
そこで幅を 100% に変更しました

すると、最初の画像のコードは次のようになります

.top {	height:100vh;	width:100%;	background:url(../images/background-1.jpg) no-repeat center top;	background-size:cover;}

ログイン後にコピー

<section class="top">...</section>

ログイン後にコピー

問題ないと思います
続いて閲覧してみましたブラウザでテストしました
ブラウザではこんな感じです

悪くないです

するとブラウザ幅もこんな感じです
320pxアダプティブは書いてませんコードはまだなので、非常に面倒ですが、それは重要ではありません

しかし、モバイルブラウジングに関しては、それが今のようなものです！！！ (iOS7を使用しています)

この写真はDIVを完全に破裂させ、数ページをオーバーフローさせました
これで人々に良い体験を与えることができますか

Baidu APIコードのJSを削除すると、この問題は解消されます
つまり、Baidu のこのコードに関連しているはずです
しかし、私の能力では
見つけることができません。。。。泣きました

ぜひご覧ください
ドメイン名がまだ解決されていないため、サーバーアドレスを提供します。。。
http://121.40.157.215 を見てみましょう

問題をご存知の場合は、直接私に教えていただければ幸いです
問題が何なのか分からない場合は、方法を教えていただければテストさせていただきますそれ

でも、私は本当に初心者なので、HTML+CSS を書くのはまあまあ
なので、JS コードをチェックする部分は本当にできません

ありがとうございます

への返信議論（解決策）

1. 画像が DIV を壊さないようにする方法 1 - TOP

本来の処理方法は、表示する画像を加工することです。たとえば、DIV の幅が 500px (ピクセル) の場合、Web ページにアップロードまたは配置する画像の幅は 500px 未満である必要があります。つまり、画像は画像ソフトウェアで切り取って縮小する必要があります。アップロードして Web ページに配置すると、DIV が壊れて開いてしまう問題を解決します。

多くの大規模な画像サイトやニュースサイトでは、Web ページの幅に合わせて写真や画像を編集するのが一般的です。
2. 写真が DIV を引き伸ばさないようにする方法 2 - TOP

DIV の制限された幅に合わせて写真を加工しない場合は、DIV の余分なコンテンツを非表示にする方法を設定できます。 DIV の幅を設定し、CSS スタイル「overflow:hidden」を追加するだけで、非表示画像が DIV より広すぎる問題と DIV がバーストする問題を解決できます。
3. 解決策 3 - TOP

問題を解決するには、画像の img タグに幅を追加するだけです。これにより、画質に影響を与えることなく、画像を比例的に縮小できます。

たとえば、Web ページの DIV 幅が 500px の場合、画像をアップロードした後に img タグの幅を 500 未満に設定できます。
これにより、画像が広すぎることによる DIV SPAN バーストの問題を解決できます。これには、画像を拡大できるという利点があります。そして同じ割合で減少します。
4、バーストの問題を解決する CSS 方法 - TOP

この方法は、CSS を使用して div 内の画像の幅を直接設定します。この方法の欠点は、画像が小さすぎる場合、画像の効果に影響を与えることです。 Web ページ上の画像を閲覧します。

Div 構造:

対応する CSS コード: .divcss5 img{width: width value + Unit}
5. CSS は画像サポートを解決しますDIV を開く方法 5 - TOP

max-width (最大幅) を使用します。たとえば、DIV の幅が 500px の場合、最大幅の CSS スタイル「max-width="500px"」を追加することで問題を解決できます。 "を DIV スタイルに追加します。ただし、この属性は IE6 ブラウザーとは互換性がありません。
6. 画像が DIV レイヤーを破壊する問題を解決するための方法の概要と推奨事項 - TOP

1)、最大幅 (max-width) +オーバーフロー:非表示。このような設定により、IE6 以降のブラウザで最大幅のスタイルをサポートできるようになり、IE6 で非表示の画像が幅を超えて DIV を拡張できるようになります。この方法はより便利で実用的です。

2) 方法 2 など、overflow:hidden 属性のみを使用します

3) 方法 1 など、DIV レイアウトの幅に合わせてアップロード時に画像を処理するソフトウェアを使用します

上記は推奨される解決策です。限られた DIV 幅で IMG 画像をバーストする方法。実際の状況に応じて、Web ページ内の画像の DIV 層が壊れる問題を解決するために、自分に合った方法を選択できます。

1. 写真が DIV を壊さないようにする方法 1 - トップ

overflow:hidden を試しましたが、効果はありませんでした

この DIV に設定した属性は、
width:100%
height:100vh です
背景の値は cover です

PC ブラウザではバーストされません