私は2つのバージョンのロゴを作成しました。縦と横の2つのバージョンを作成しました。最初はモバイル画面、もう1つはデスクトップです。残念ながら私はDreamweaverとSublimeの両方のテキストエディタで実装することに失敗しました。私が数時間の研究の後に気づいた唯一のことは、ダミーイメージ(placehold.it)でしか動作しないことです。さらに問題は、ソースイメージを正しく表示すると思われるsrc属性とは対照的に、srcset属性(ブラウザに関係なく何も表示できない)のようです。 どんな種類のヘルプがあれば幸いです! (コードに従う)ソースコード内で応答する画像のプロパティを適用する
0
A
答えて
0
これは、CSSとメディアクエリで最も効果的です。あなたのCSSでは、最初にロゴのモバイル版の画像を設定してから、画面幅が641px以上の場合は別のロゴを使用するように、メディアのクエリで最初のロゴを上書きします。
.logo {
height: 50px;
width: 100px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
}
@media screen and (min-width: 641px) {
.logo {
height: 100px;
width: 200px;
background-image: url(images/logo2.png);
}
}
+0
幸いにも、最初のコメントは私のために働いたが、とにかく入力していただきありがとうございます:) – Yiannis
関連する問題
- 1. 画像応答
- 2. UISliderに応答してimageView内の画像を伸ばす
- 3. 応答画像(最大幅)
- 4. ウェブ上で画像をアップロードする:応答としてHTMLソースコードを取得する
- 5. のSymfony - 応答の画像 - 高速、最適化
- 6. Sencha ProxyでJSON応答の内部プロパティを使用する方法
- 7. 応答性のあるプロフィール画像を作成する
- 8. jQueryで異なるdivにjson応答を適用する
- 9. 電子メールの応答画像
- 10. ボタンイベントに応答して画像を更新する
- 11. スキャンされた画像の適応スレッシュホールド
- 12. 画像にビルトインカラープロファイルを適用する
- 13. 画像にSVGマスクを適用する
- 14. divの内容に応じて画像を変更する
- 15. 使用するキャッシュ応答
- 16. ASP.Netレイアウトを適応させ、画像とボタンを解像度に適応させる(レスポンシブなレイアウト)
- 17. サーブレット応答でプリントライターを使用する
- 18. SeleniumでHTTP応答ヘッダーを検査する最適な方法
- 19. DIVの背景画像タグで/に応答性のある画像を使用することはできますか?
- 20. ラベルに画像を適用
- 21. Photoshopで複数の画像に色補正を適用する
- 22. OCRの画像を最適化する
- 23. PHP:XMLと画像で応答するWebサービスを作成するにはどうすればよいですか?
- 24. asp.net mvc2のモデルのプロパティの変更に応答する
- 25. CKEditor&ASP.NET 4の画像アップロード、iframeエラーのアップロードへの応答
- 26. 応答ファイルマネージャーのプレビュー画像がないテーマのアイコン
- 27. 画像アップロードの問題(無効なファイルの応答)android
- 28. 内容に応じた伸縮画像
- 29. ポリマーのプロパティ値へのサーバーの応答
- 30. 画像ビューでタッチイベントを適用する方法
ダミーイメージで動作する場合は、相対的な** src **属性に関するものです。おそらく名前ファイル内のスペース。 'logo_horiz.png'や' logo_vertical.png'や[encode](http://www.w3schools.com/tags/ref_urlencode.asp)という名前のイメージの名前を '%20'と改名してみてください。また、相対パスが正しいかどうかを確認してください。 –
私は十分なあなたにジョーディを感謝することはできませんでした!アンダースコア形式が機能しました! – Yiannis