[kodawari555]

Snow Monkey:バージョン: 12.2.2
Snow Monkey Blocks:バージョン 10.2.1
【お使いのブラウザ】 Chrome

固定ページのアイキャッチ（ヘッダー画像）の大きさを、アイキャッチに設定した画像のフルサイズにしたいです。

設定した画像の幅を画面いっぱいの「CSS　width:100%;」として、高さの調整は、アスペクト比が同じままレスポンシブになるようにしたいです。

@media (min-width: 992px){
  .c-page-header[data-has-image=true] {
    min-height: 1280px;
  }
}

などとすれば、固定ページのヘッダーの高さを調整できることは以前フォーラムで教えたいただいたのですが、画面サイズが変わったときに、ヘッダー画像のアスペクト比がおかしく、文字の入ったヘッダーデザインがおかしくなってしまいます。

固定ページのヘッダー画像のサイズを、単純に

width:100%;
height:auto;

のようにしたいのですが、他のCSSコードで上書きされてしまうようで上手くいきません。

わかる方いましたら、ご教示いただけますと助かります。

よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[アクツ]

kodawari555 さんこんにちは。

「画像 アスペクト比 CSS」を検索すると、どうやったらアスペクト比が維持したままできるかの情報が出てくると思います。
一旦そちらを参考にやってみるのはいかがでしょうか
（※::beforeの疑似要素を使うなどのテクニックが必要になってくるかと思います）

雑な回答ですみません！

♥ 1

いいねをした人: 居ません

[キタジマ タカシ]

おそらく kodawari555 さんが書かれているアスペクト比は全てのページヘッダーのアスペクト比を同じ比率で固定したいということではなくて、画像そのもののアスペクト比を維持して表示したいということだと思うので、ちょっとコードを書いてみました。

.c-page-header[data-has-image="true"] {
    min-height: auto;
    height: auto;
}

.c-page-header[data-has-image="true"] .c-page-header__bgimage {
    position: relative;
}

.c-page-header[data-has-image="true"] .c-page-header__bgimage > img {
    height: auto;
    position: relative;
}

※ページヘッダーの CSS はバージョンによって変わる可能性が若干高めなのでご注意ください。

♥ 2

いいねをした人: 居ません

[kodawari555]

@アクツさん

ご教示いただきありがとうございます。

この機会に、もう一度疑似要素まわりの知識を勉強し直したいと思います！

♥ 0

いいねをした人: 居ません

[kodawari555]

@キタジマ タカシさん

 

ご教示いただき、ありがとうございます。

こちらのコードで、無事やりたいことが実現できました。

 

上に少し空白ができていたので、

padding:0;

を追加し、完璧になりました。

 

聞かずに自分でできるようになりたいのですが。。。WPテンプレートのクラスが関わると思うようにカスタマイズできず、難しいです。。。いつもありがとうございます！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

解決できたとのことで良かったです！ トピック閉じますね。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿