Flexboxで可変するliのbackgroundを差し替えたい

困ってしまい質問させていただきました。
jsやjQuery得意な方、よろしければお願い致します。不慣れなためもし失礼がありましたらご容赦ください。

タイトルの通りなのですが、

if( x軸のliが3つのとき ){
　li:first-of-type から li:nth-of-type(3) までの
　backgroundをそれぞれimage01.pngからimage03.pngに差し替える。
}

をどう書いてよいか解らずもう二日悩んでます。
なにかヒントになることでも、もちろん解答そのものでも歓迎ですのでどうかどなたか教えてください。よろしくお願い致します。

質問者からの補足コメント

• .flex {
  display: flex;
  }
  ul {
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 auto;
  width: 80vw;
  }
  li {
  background: #ccc;
  height: 25vmin;
  list-style: none;
  margin-top: 10vmin;
  width: 45vmin;
  }
  li a {
  align-items: center;
  font-size: 1.5rem;
  height: 100%;
  justify-content: center;
  }

    補足日時：2016/12/19 12:50

• <nav role="navigation" aria-label="メインメニュー">
  <ul class="flex">
  <li><a href="#01" class="flex">01</a></li>
  <li><a href="#02" class="flex">02</a></li>
  <li><a href="#03" class="flex">03</a></li>
  <li><a href="#04" class="flex">04</a></li>
  <li><a href="#05" class="flex">05</a></li>
  <li><a href="#06" class="flex">06</a></li>
  </ul>
  </nav>

    補足日時：2016/12/19 12:53

No.3 ベストアンサー 回答者： Ogre7077 回答日時： 2016/12/22 12:16

スタイルを読む限り、以下の式が成り立つ場合にスタイルを変更すると見えます。

(縦幅 * 0.45) * 3 <= 横幅 * 0.8 < (縦幅 * 0.45) * 4

ならば CSS メディアクエリーの機能を活用して、
アスペクト比による振り分けが可能でしょう。

1.6875 <= 横幅/縦幅 < 2.25
CSS メディアクエリの構文にあわせて
16875/10000 <= アスペクト比 <= 22499/10000

<style>
ul li { background: #ccc; }
/* x軸 の li が3つのとき、最初の三つの背景を変更 */
@media (min-aspect-ratio: 16875/10000) and (max-aspect-ratio: 22499/10000) {
ul li:nth-child(-n+3) { background: red;}
}
</style>

参考:
https://developer.mozilla.org/ja/docs/Web/CSS/Me …

この回答へのお礼

お返事が大変遅れてしまい申し訳ございません。
恥かしながら min-aspect-ratio という書き方をはじめて知りました。
勉強させていただきます。機智を分けてくださり感謝します。

お礼日時：2016/12/26 10:14

No.2 回答者： yambejp 回答日時： 2016/12/19 14:07

たとえば

$(function(){
console.log($('li:nth-child(1)').offset().top);
console.log($('li:nth-child(2)').offset().top);
console.log($('li:nth-child(3)').offset().top);
console.log($('li:nth-child(4)').offset().top);
console.log($('li:nth-child(5)').offset().top);
console.log($('li:nth-child(6)').offset().top);
});

とすると、それぞれのliについて縦位置がわかります
３列だとすると
$('li:nth-child(1)').offset().top=$('li:nth-child(3)').offset().top
かつ
$('li:nth-child(1)').offset().top!=$('li:nth-child(4)').offset().top
ですね

この回答へのお礼

ありがとうございます。
教えて頂いたことを元になんとかやってみたいと思います。
ご教示感謝します。

お礼日時：2016/12/21 12:01

No.1 回答者： yambejp 回答日時： 2016/12/19 12:09

ソースを提示されたほうがより具体的な回答がつきやすいと思います

この回答へのお礼

ご指摘ありがとうございます。
字数制限のため大分省きましたが載せました。

お礼日時：2016/12/19 13:02