バージョン選択

フォーラム

メニュー

オンライン状況

71 人のユーザが現在オンラインです。 (58 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 71
もっと...

サイト内検索

質問 > 管理機能 > 横にスライドするtopページの画像の件です。

管理機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
yachi
投稿日時: 2020/12/25 13:32
対応状況: 確認中
新米
登録日: 2020/12/25
居住地:
投稿: 8
横にスライドするtopページの画像の件です。
諸先生方、はじめまして。
当方、素人です。
会社のwebショップを立ち上げようとしております。
以下の事で行き詰まり困っております。
宜しければご教授下さいませ。
何卒よろしくお願い申し上げます。


[EC-CUBE] EC-CUBE4.0.5新規インストール

[レンタルサーバ] さくらインターネット

[OS] Windows10

[PHP] 7.4.10 (CGI)

[データベース] mysql57
バージョン5.7

[WEBサーバ] Apache/2.4.46

[ブラウザ] Chrome: 87.0.4280.88
      Microsoft Edge
Internet Explorer11

[導入プラグインの有無] 商品おすすめ順並び替えプラグイン for EC-CUBE4、デザインタグ表示プラグイン for EC-CUBE4

[カスタマイズの有無] 写真や文字を変更した程度です。

[現象] TOPページの横にスライドする、サイズの違う3枚の画像を、ブラウザが違ってもサイズと縦横比を同じにしたいです。Photoshopは使えません。

ChromeとMicrosoft Edgeでは正しくトリミングされ、思い通りに表示されるのですが、Internet Explorer11では画像の縦横比がくずれ、横に伸びてしまっています。

現在、CSSでobject-fitを使い対応しようとしています。
IEでもobject-fitを使えるようにするスクリプトがあるとネットで見つけ、object-fit-imagesのofi.jsファイルをJavaScript管理のコードの所に貼り付けております。やり方が間違っているでしょうか。
ページ管理のtopページのhtml?のところにも、何かコードを入れないといけないのでしょうか。jsファイルを呼び出すための何かとか・・

cssは以下の通りです。高さは450pxにしたいです。

大変申し訳ございませんが、ご教授をよろしくお願い申し上げます。

【CSS】
.ec-sliderRole img {
width: 100%;
height: 450px;
object-fit: cover;
font-family: 'object-fit: cover;';
}
umebius
投稿日時: 2020/12/25 17:41
対応状況: −−−
登録日: 2016/7/22
居住地:
投稿: 2085
Re: 横にスライドするtopページの画像の件です。
object-fitにこだわる必要がなければ以下はどうでしょうか。
※デフォルトのcssやhtmlのままの前提になります。

.main_visual {
    height: 450px;
}

.main_visual .slick-list, .main_visual .slick-track {
    height: 100%;
}

.main_visual .slick-slide {
    position: relative;
    overflow: hidden;
}

.main_visual img {
    height: 100%;
    width: auto;
    max-width: none;
    position: absolute;
    right:50%;
    bottom:50%;
    -webkit-transform: translate(50%,50%);
    transform: translate(50%,50%);
}


----------------
EC-CUBEカスタマイズ・高速化・脆弱性対策・SEO ご相談ください。

2系・3系から4系へのバージョンアップ実績豊富

yachi
投稿日時: 2020/12/26 16:24
対応状況: 開発中
新米
登録日: 2020/12/25
居住地:
投稿: 8
Re: 横にスライドするtopページの画像の件です。
umebius様

早速のご返信をありがとうございました。
縦横比のきれいな画像になりました。
こんなにすぐに適切なコード?が浮かぶものなんですね。
すごいと思います。ありがとうございました。

恐れ入ります。ひとつだけ気になる箇所があったのですが、
お聞きしても宜しいでしょうか。すみません。

画像を直接左クリックで手動で横にスクロールさせた時に、
Internet Explorer11では画像のまわりの黒の枠線が出ないのですが、ChromeとMicrosoft Edgeでは黒の枠線が出てしまいます。

今回ご教授いただきました修正で、画像の横の長さが修正前に比べて短くなり縦横比のきれいな状態になりました。
修正前は画像の横の長さが画面一杯でした。

ChromeとMicrosoft Edgeの修正後の画像を左クリックした時の
まわりの黒枠線は、修正前の画像の横の長さ(画面の幅一杯)で発生しております。

可能でしたらInternet Explorer11のようにクリックしても画像のまわりの黒の枠線が発生しないようにできたらと思っております。

何度申し訳ございません。
何卒、よろしくお願い申し上げます。







umebius
投稿日時: 2021/1/8 19:48
対応状況: −−−
登録日: 2016/7/22
居住地:
投稿: 2085
Re: 横にスライドするtopページの画像の件です。
ご回答が遅くなりすみません。

黒枠、というのはおそらくfocusした時の枠かと思うのですが、
以下ですと消えますでしょうか?
.slick-slide:focus {
            outline: none;
        }
        .slick-slide img:focus {
            outline: none;
        }


----------------
EC-CUBEカスタマイズ・高速化・脆弱性対策・SEO ご相談ください。

2系・3系から4系へのバージョンアップ実績豊富

yachi
投稿日時: 2021/1/15 11:06
対応状況: −−−
新米
登録日: 2020/12/25
居住地:
投稿: 8
Re: 横にスライドするtopページの画像の件です。
umebius様

いつも大変お世話になっております。
ご返信ありがとうございました。

ご指示の通り行いましたら、黒枠が消えました。
本当にありがとうございます。

ご指示をいただく前に自分でいろいろやってみたのですが、
全然できなくてだめでした。

focusというものがあるのですね。
はじめて知りました。
勉強になりました。
本当にありがとうございました。





スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,288名です
総投稿数は109,688件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1567
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.