バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

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

管理機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
yachi
投稿日時: 2020/12/25 13:32
対応状況: 確認中
新米
登録日: 2020/12/25
居住地:
投稿: 3
横にスライドする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
居住地: 東京日本橋
投稿: 1834
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-CUBE4系 カスタマイズ ECのプロがシステム特急案件承ります。
EC-CUBE開発 リモートで働くエンジニア募集中

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

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

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

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

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

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

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

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







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

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


----------------
EC-CUBE4系 カスタマイズ ECのプロがシステム特急案件承ります。
EC-CUBE開発 リモートで働くエンジニア募集中

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

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

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

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

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





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


 



ログイン


EC-CUBEペイメント

公式ストアEC-CUBE4系デザインテンプレート続々リリース中

統計情報

総メンバー数は68,550名です
総投稿数は99,523件です

投稿数ランキング

1
seasoft
7333
2
468
2811
3
AMUAMU
2712
4
nanasess
2121
5
umebius
1834
6
yuh
1612
7
red
1429
8
h_tanaka
1062
9
fukap
907
10
tsuji
863
11
shutta
835
12
tao_s
793
13 ramrun 789
14 karin 657
15 sumida 641
16
homan
633
17 DELIGHT 572
18
patapata
502
19
flealog
485
20 tonton 437


ネットショップの壺

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

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