Q.ヘッダーコンテンツ画像スライダーのスライドを比率固定にする方法を教えてください
ヘッダーコンテンツ画像スライダーのスライドに登録されている画像を、切り取られずに全体を表示させたいです。PCでは比率固定にして全体を表示させる方法を教えてください。
▼変更後のイメージ(参考:デモサイト)
A.下記の方法でご対応ください。
TCDテーマ>基本設定>カスタムCSSに入力します。下記例は横1980px、縦1080pxの画像を利用した例になります。
@media not all and (max-width: 767px) { #index_header_content, #index_slider_wrap, #index_slider,#index_slider .item{ aspect-ratio: 1980 / 1080; height: auto !important; } }
※スマホ時の比率を指定する場合:
冒頭の @media not all and (max-width: 767px)
を @media screen and (max-width:767px) {
に変更してください。
※スマホでも同じ比率で表示させる場合:
冒頭の @media not all and (max-width: 767px)
と末尾の }
を削除してください。
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!