WST87448735
@WST87448735

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

スライダーの画像がデバイスによって意図せず変わってしまう

解決したいこと

スライダーを実装していますが、1番メインの写真がモニターやスマホで見ると大丈夫なんですが、PCサイズで見ると

のelement.styleにwidth220pxとなっていて意図しないものになっていました。

発生している問題・エラー

出ているエラーメッセージを入力

該当するソースコード

jquery-1.10.2.min.js
function(e, n, r, i) {
            if (e && 3 !== e.nodeType && 8 !== e.nodeType && e.style) {
                var o, a, s, l = x.camelCase(n), u = e.style;
                if (n = x.cssProps[l] || (x.cssProps[l] = tn(u, l)),
                s = x.cssHooks[n] || x.cssHooks[l],
                r === t)
                    return s && "get"in s && (o = s.get(e, !1, i)) !== t ? o : u[n];
                if (a = typeof r,
                "string" === a && (o = Jt.exec(r)) && (r = (o[1] + 1) * o[2] + parseFloat(x.css(e, n)),
                a = "number"),
                !(null == r || "number" === a && isNaN(r) || ("number" !== a || x.cssNumber[l] || (r += "px"),
                x.support.clearCloneStyle || "" !== r || 0 !== n.indexOf("background") || (u[n] = "inherit"),
                s && "set"in s && (r = s.set(e, r, i)) === t)))
                    try {
                        u[n] = r
                    } catch (c) {}
            }

例)

def greet
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 152px;">
<ul class="slide" style="width: 1415%; position: relative; transition-duration: 0s; transform: translate3d(-202px, 0px, 0px);">
<li style="float: left; list-style: none; position: relative; width: 202px;" class="bx-clone"><img src="/mg/wp-content/uploads/2024/03/"></li>
<li style="float: left; list-style: none; position: relative; width: 202px;" class="bx-clone"><img src="/mg/wp-content/uploads/2024/03/"></li>
<li style="float: left; list-style: none; position: relative; width: 202px;" class="bx-clone"><img src="/mg/wp-content/uploads/2024/03/"></li>
</ul>
</div>
<div class="bx-controls bx-has-controls-direction">
<div class="bx-controls-direction">
<a class="bx-prev" href="">Prev</a>
<a class="bx-next" href="">Next</a>
</div></div></div><!-- /.slide -->

end

自分で試したこと

恐らく、element.styleが変わることから、jQueryで勝手に変わるようにコードが入っていると考えますが、分かりません。

0

3Answer

見たところ、画面の幅が768pxを超えているときに、画面の高さによって画像のサイズが変わっているようでした。
768px以下だと、画面の幅いっぱいになるようです。
qiita.gif

参考として載せていただいているHTMLは、プラグインなどで生成された要素も含まれている表示後のHTMLのようです。
原因特定のために、元となるHTML/CSS/JavaScriptのソースコードを載せていただくことは可能でしょうか?

2Like

Comments

  1. このページから見るのは厳しい感じでしょうか?

    調査となると該当しそうな部分以外は省いたりして、最小限の形にして切り分けながら調査を進めることが多いです。
    ですので、元のソースがあった方が確実に切り分けはしやすいと思います…

    自分が開発したわけではないので😢

    ということは、修正自体も別の方にお任せする形になるのでしょうか…?

  2. @WST87448735

    Questioner

    修正自体も外注です💦

  3. となると、事象だけお伝えできればOKといった形でしょうか…?
    こちらで原因・修正方法までわかる必要はない…?

せめて再現するページを用意してください。さすがにそこだけ見せられて回答できるほどのエスパー能力は持ち合わせておりませんので。

例えば playground として https://livecodes.io/ とか https://codepen.io/ を使って現象を再現するページを用意していただけると幸いです。

1Like

Comments

  1. @WST87448735 つまり jsのエントリーポイントとしては

    を見るべきというニュアンス……?

    スライダー拡張はこれ由来か

    なので、使っているプラグインは BxSlider v4.1.2 ということでしょうか?

    @nak435 上記の内容の様ですので投げておきます。

    @WST87448735 で、このページのどの状態が意図しない状態なのか詳しくお願いします。

  2. @WST87448735 そのURL や症状を 質問文に書いてほしいのですよね……。(ここはデフォルト折りたたまれるので把握するのが面倒な位置にありますので。

    あと、私の環境では再現していません。再現するサイズや回線設定等ありますでしょうか?

  3. @WST87448735 いや、ディスプレイのサイズよりもそのディスプレイの解像度……というかその時のブラウザのウィンドウのサイズが重要です。具体的には innerHeightinnerWidth あたり F12のコンソールとかで確認してみてください

  4. @WST87448735

    Questioner

    @juner
    innerHeight 585px
    innerWidth 971px

    ディスプレイ解像度 1920×1080です。

  5. 再現しませんね……。
    image.png

  6. @WST87448735

    Questioner

    自分のPCだけですかね💦
    うーん

  7. ああ、高さか。再現しました。
    image.png

    問題は高さです! @nak435

確認です、

  • 3枚とも同じ画像でしょうか? <img src="/mg/wp-content/uploads/2024/03/">
  • 画像の元々のサイズはいくつでしょうか? width x height
  • jQueryのbxSliderは使わないのでしょうか?
1Like

Comments

  1. @WST87448735

    Questioner

    同じ画像ではありません!
    width 960px
    height 719pxです。

    コーディングを外注した形なので、、、

  2. https://rotary-pier88.com/boat/stock/item/5911/
    こちらでご確認頂けると幸いです

    自分の環境(Mac、Safari)でも再現しませんでした。

    写真の通り、1枚目がかなり小さく表示されています。

    見ているエレメントは先頭の画像だと思われます。

    scr.png

    2枚目以降の大きい表示の時のエレメントと比較してみてください。
    ちなみに、Safariで見ると画像に依らずwidth:100%です。

    scr2.png
  3. @WST87448735

    Questioner

    1枚目という伝え方が間違っていました。
    選択中の画像は全て小さく表示されます。
    写真は2枚目です。

    スクリーンショット (175).png

  4. 1枚目という伝え方が間違っていました。
    選択中の画像は全て小さく表示されます。

    なるほど。

    971 x 585 のサイズで、Safari と Chrome で確認しましたが、再現しませんでした。

    再現するマシンのOSとブラウザの種類とバージョンはいくつでしょうか?

  5. @WST87448735

    Questioner

    Windows11
    Chrome
    バージョン 23H2(OSビルド 22631.3447)
    になります。

  6. 選択中の画像は全て小さく表示されます。

    Windows 10 の Chrome で w971 x h585 で確認しました。
    このサイズだと、画像は w201 x h151で表示されます。(これを「小さい」と表現されていると思います。)
    ここから、ブラウザのウインドウサイズを縦に広げていくにつれて段々と画像サイズが大きくなっていきます。@YottyPG さんが指摘された通りです。

    つまり、中央に表示する画像のサイズは、ブラウザのウインドウサイズの縦幅を基準に計算されています。計算式までは特定していませんが、横幅>縦幅においては、明らかにウインドウサイズの縦幅に比例していると思われます。

    この計算式を変えることで、表示する画像サイズは変えられるはずです。

    PCやOSに依存するのではなく、ウインドウサイズの縦幅に依存したサイズになっているため、ウインドウサイズの縦幅が幾つのときに、中央に表示する画像サイズの縦幅を幾つにして欲しいかを、外注先に伝えればよいかと思います。

  7. @WST87448735

    Questioner

    ありがとうございます!
    早速伝えてみます!

Your answer might help someone💌