質問編集履歴

10 修正

takeshi1907

takeshi1907 score 23

2019/06/22 00:33  投稿

HTML CSS レスポンシブで背景画像がボケる件
Bootstrapでレスポンシブのサイトを作っています。
以下の様なコードをindex.htmlの中に記述をしています。
uploads/image-design-5-DH0.jpg 部分が背景画像になります。
HTML
```ここに言語を入力
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/image-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/image-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
```
CSS
```ここに言語を入力
   .pix-hotel-1 {
       background-image: linear-gradient(rgba(54, 63, 72, 0.85), rgba(54, 63, 72, 0.85)), url('../images/hotel/intro-bg-hotel.jpg');
       background-image: linear-gradient(rgba(54, 63, 72, 0.85), rgba(54, 63, 72, 0.85)), url('../uploads/image-design-5-DH0.jpg');
       background-size: cover;
       background-attachment: fixed;
       background-position: -330px;
       -webkit-background-size: cover;
       background-size: cover;
   }
```
image-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
これは何が原因でしょうか?
クロームで見た場合
![イメージ説明](c0a33a6ef5b568e2c1d7ee3fc032cf65.png)
iPhoneXの実機で見た場合
![イメージ説明](f1326cec939b377b35b88b4983b54462.jpeg)
よろしくお願いします。
  • HTML

    14652 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9830 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    347 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • Bootstrap

    1659 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

9 修正

takeshi1907

takeshi1907 score 23

2019/06/22 00:30  投稿

HTML CSS レスポンシブで背景画像がボケる件
Bootstrapでレスポンシブのサイトを作っています。
以下の様なコードをindex.htmlの中に記述をしています。
uploads/image-design-5-DH0.jpg 部分が背景画像になります。
HTML  
```ここに言語を入力
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/image-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/image-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
```
CSS
```ここに言語を入力
   .pix-hotel-1 {
       background-image: linear-gradient(rgba(54, 63, 72, 0.85), rgba(54, 63, 72, 0.85)), url('../images/hotel/intro-bg-hotel.jpg');
       background-size: cover;
       background-attachment: fixed;
       background-position: -330px;
       -webkit-background-size: cover;
       background-size: cover;
   }
```
image-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
これは何が原因でしょうか?
クロームで見た場合
![イメージ説明](c0a33a6ef5b568e2c1d7ee3fc032cf65.png)
iPhoneXの実機で見た場合
![イメージ説明](f1326cec939b377b35b88b4983b54462.jpeg)
よろしくお願いします。
  • HTML

    14652 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9830 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    347 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • Bootstrap

    1659 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

8 修正

takeshi1907

takeshi1907 score 23

2019/06/22 00:29  投稿

HTML CSS レスポンシブで背景画像がボケる件
Bootstrapでレスポンシブのサイトを作っています。
以下の様なコードをindex.htmlの中に記述をしています。
uploads/image-design-5-DH0.jpg 部分が背景画像になります。
```ここに言語を入力
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/image-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/image-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
```
CSS  
```ここに言語を入力  
   .pix-hotel-1 {  
       background-image: linear-gradient(rgba(54, 63, 72, 0.85), rgba(54, 63, 72, 0.85)), url('../images/hotel/intro-bg-hotel.jpg');  
       background-size: cover;  
       background-attachment: fixed;  
       background-position: -330px;  
       -webkit-background-size: cover;  
       background-size: cover;  
   }  
```  
image-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
これは何が原因でしょうか?
クロームで見た場合
![イメージ説明](c0a33a6ef5b568e2c1d7ee3fc032cf65.png)
iPhoneXの実機で見た場合
![イメージ説明](f1326cec939b377b35b88b4983b54462.jpeg)
よろしくお願いします。
  • HTML

    14652 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9830 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    347 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • Bootstrap

    1659 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

7 修正

takeshi1907

takeshi1907 score 23

2019/06/21 23:21  投稿

HTML CSS レスポンシブで背景画像がボケる件
Bootstrapでレスポンシブのサイトを作っています。
以下の様なコードをindex.htmlの中に記述をしています。
uploads/image-design-5-DH0.jpg 部分が画像になります。
uploads/image-design-5-DH0.jpg 部分が背景画像になります。
```ここに言語を入力
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/image-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/image-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
```
image-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
これは何が原因でしょうか?
クロームで見た場合
![イメージ説明](c0a33a6ef5b568e2c1d7ee3fc032cf65.png)
iPhoneXの実機で見た場合
![イメージ説明](f1326cec939b377b35b88b4983b54462.jpeg)
よろしくお願いします。
  • HTML

    14652 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9830 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    347 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • Bootstrap

    1659 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

6 修正

takeshi1907

takeshi1907 score 23

2019/06/21 23:20  投稿

HTML CSS レスポンシブで背景画像がボケる件
ブーストラップでレスポンシブのサイトを作っています。
Bootstrapでレスポンシブのサイトを作っています。
以下の様なコードをindex.htmlの中に記述をしています。
uploads/image-design-5-DH0.jpg 部分が画像になります。
```ここに言語を入力
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/image-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/image-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
```
image-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
これは何が原因でしょうか?
クロームで見た場合
![イメージ説明](c0a33a6ef5b568e2c1d7ee3fc032cf65.png)
iPhoneXの実機で見た場合
![イメージ説明](f1326cec939b377b35b88b4983b54462.jpeg)
よろしくお願いします。
  • HTML

    14652 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9830 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    347 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • Bootstrap

    1659 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

5 修正

takeshi1907

takeshi1907 score 23

2019/06/21 23:19  投稿

至急 HTML CSS レスポンシブで背景画像がボケる件
HTML CSS レスポンシブで背景画像がボケる件
ブーストラップでレスポンシブのサイトを作っています。
以下の様なコードをindex.htmlの中に記述をしています。
uploads/image-design-5-DH0.jpg 部分が画像になります。
```ここに言語を入力
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/image-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/image-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
```
image-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
これは何が原因でしょうか?
クロームで見た場合
![イメージ説明](c0a33a6ef5b568e2c1d7ee3fc032cf65.png)
iPhoneXの実機で見た場合
![イメージ説明](f1326cec939b377b35b88b4983b54462.jpeg)
よろしくお願いします。
  • HTML

    14652 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9830 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    347 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • Bootstrap

    1659 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

4 修正

takeshi1907

takeshi1907 score 23

2019/06/21 23:15  投稿

至急 HTML CSS レスポンシブで背景画像がボケる件
ブーストラップでレスポンシブのサイトを作っています。
以下の様なコードをindex.htmlの中に記述をしています。
uploads/image-design-5-DH0.jpg 部分が画像になります。
```ここに言語を入力
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/image-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/image-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
```
Untitled-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
image-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
これは何が原因でしょうか?
クロームで見た場合
![イメージ説明](c0a33a6ef5b568e2c1d7ee3fc032cf65.png)
iPhoneXの実機で見た場合
![イメージ説明](f1326cec939b377b35b88b4983b54462.jpeg)
よろしくお願いします。
  • HTML

    14652 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9830 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    347 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • Bootstrap

    1659 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

3 修正

takeshi1907

takeshi1907 score 23

2019/06/21 23:15  投稿

至急 HTML CSS レスポンシブで背景画像がボケる件
ブーストラップでレスポンシブのサイトを作っています。
以下の様なコードをindex.htmlの中に記述をしています。
uploads/Untitled-design-5-DH0.jpg 部分が画像になります。
uploads/image-design-5-DH0.jpg 部分が画像になります。
```ここに言語を入力
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/Untitled-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/Untitled-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/image-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/image-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
```
Untitled-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
これは何が原因でしょうか?
クロームで見た場合
![イメージ説明](c0a33a6ef5b568e2c1d7ee3fc032cf65.png)
iPhoneXの実機で見た場合
![イメージ説明](f1326cec939b377b35b88b4983b54462.jpeg)
よろしくお願いします。
  • HTML

    14652 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9830 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    347 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • Bootstrap

    1659 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

2 修正

takeshi1907

takeshi1907 score 23

2019/06/21 23:13  投稿

至急 HTML CSS レスポンシブで背景画像がボケる件
ブーストラップでレスポンシブのサイトを作っています。
以下の様なコードをindex.htmlの中に記述をしています。
uploads/Untitled-design-5-DH0.jpg 部分が画像になります。
```ここに言語を入力
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/Untitled-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/Untitled-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
```
これは何が原因でしょうか?
クロームで見た場合
![イメージ説明](c0a33a6ef5b568e2c1d7ee3fc032cf65.png)
iPhoneXの実機で見た場合
![イメージ説明](f1326cec939b377b35b88b4983b54462.jpeg)
よろしくお願いします。
  • HTML

    14652 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9830 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    347 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • Bootstrap

    1659 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

1 タグ変更

takeshi1907

takeshi1907 score 23

2019/06/21 23:13  投稿

至急 HTML CSS レスポンシブで背景画像がボケる件
ブーストラップでレスポンシブのサイトを作っています。
以下の様なコードをindex.htmlの中に記述をしています。
uploads/Untitled-design-5-DH0.jpg 部分が画像になります。
```ここに言語を入力
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/Untitled-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/Untitled-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
```
Untitled-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX で表示すると拡大してボケてしまいます。
これは何が原因でしょうか?
クロームで見た場合
![イメージ説明](c0a33a6ef5b568e2c1d7ee3fc032cf65.png)
iPhoneXの実機で見た場合
![イメージ説明](f1326cec939b377b35b88b4983b54462.jpeg)
よろしくお願いします。
  • レスポンシブWebデザイン

    347 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • HTML

    14652 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9830 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Bootstrap

    1659 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る