質問 > 管理機能 > 横にスライドするtopページの画像の件です。 |
管理機能
スレッド表示 | 古いものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
yachi |
投稿日時: 2021/1/15 11:06
対応状況: −−−
|
新米 登録日: 2020/12/25 居住地: 投稿: 8 |
Re: 横にスライドするtopページの画像の件です。 umebius様
いつも大変お世話になっております。 ご返信ありがとうございました。 ご指示の通り行いましたら、黒枠が消えました。 本当にありがとうございます。 ご指示をいただく前に自分でいろいろやってみたのですが、 全然できなくてだめでした。 focusというものがあるのですね。 はじめて知りました。 勉強になりました。 本当にありがとうございました。 |
umebius |
投稿日時: 2021/1/8 19:48
対応状況: −−−
|
神 登録日: 2016/7/22 居住地: 投稿: 2085 |
Re: 横にスライドするtopページの画像の件です。 ご回答が遅くなりすみません。
黒枠、というのはおそらくfocusした時の枠かと思うのですが、 以下ですと消えますでしょうか?
|
yachi |
投稿日時: 2020/12/26 16:24
対応状況: 開発中
|
新米 登録日: 2020/12/25 居住地: 投稿: 8 |
Re: 横にスライドするtopページの画像の件です。 umebius様
早速のご返信をありがとうございました。 縦横比のきれいな画像になりました。 こんなにすぐに適切なコード?が浮かぶものなんですね。 すごいと思います。ありがとうございました。 恐れ入ります。ひとつだけ気になる箇所があったのですが、 お聞きしても宜しいでしょうか。すみません。 画像を直接左クリックで手動で横にスクロールさせた時に、 Internet Explorer11では画像のまわりの黒の枠線が出ないのですが、ChromeとMicrosoft Edgeでは黒の枠線が出てしまいます。 今回ご教授いただきました修正で、画像の横の長さが修正前に比べて短くなり縦横比のきれいな状態になりました。 修正前は画像の横の長さが画面一杯でした。 ChromeとMicrosoft Edgeの修正後の画像を左クリックした時の まわりの黒枠線は、修正前の画像の横の長さ(画面の幅一杯)で発生しております。 可能でしたらInternet Explorer11のようにクリックしても画像のまわりの黒の枠線が発生しないようにできたらと思っております。 何度申し訳ございません。 何卒、よろしくお願い申し上げます。 |
umebius |
投稿日時: 2020/12/25 17:41
対応状況: −−−
|
神 登録日: 2016/7/22 居住地: 投稿: 2085 |
Re: 横にスライドするtopページの画像の件です。 object-fitにこだわる必要がなければ以下はどうでしょうか。
※デフォルトのcssやhtmlのままの前提になります。
|
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;'; } |
スレッド表示 | 古いものから | 前のトピック | 次のトピック | トップ |