CSS/Jqueryコンテナとイメージのサイズを自動変更する方法

Question

特定のjQueryライブラリ（Windy Slider）を自動サイズにする際に問題があります。私は私が午前問題は、あなたがワイヤーフレーム&モックアップ青い丸ボタンをクリックすると、ウィンドウが内部の画像スライダーでポップアップする必要があり、ということであるここhttp://codepen.io/zyoung0206/pen/rLmXbV

見つけることができますCodePenにコードをアップロードしています。これらのコンテナコードは、CodePenのCSS部分の上部にあります。

.windy-demo { 
    /*width: 1024px;*/ 
    width: 60%; 
    margin: 40px auto; 
    color: #aaa; 
} 

.windy-demo ul.wi-container { 
/* width: 1044px; 
    height: 788px;*/ 
    width: 60%; 
    height: 80%; 
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
} 

私が達成しようとしているのは、これらのコンテナを画面の60％の幅にすることです。内側のイメージが大きすぎるとします（コンテナは800pxの幅ですが、イメージは1024pxです）。 。

私は、手動でウィンドウサイズの固定ピクセルになったコンテナの幅を設定しようとしましたが、幅：60％として設定しようとしましたが、それよりも大きい画像でうまく機能しません。コンテナ。

Answer 1

だと思いますが、img { width: 100%; height: auto; }となります。私はちょうどあなたのフィドルで遊んだし、私が見る限り、これはうまくいくはずです。私はちょうど私の答えを更新した 、これらは、私のために働いたローカルあなたの例を再構築するCSSの最初の行は、次のとおりです。

.windy-demo { 
     width: 60%; 
     margin: 40px auto; 
     color: #aaa; 
    } 

    .windy-demo ul.wi-container { 
     padding: 0; 
     margin: 0; 

     box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
    } 
    .windy-demo ul.wi-container li { 
     display: block; /* Make list items to block in order to stretch 100% */ 
     overflow-y: hidden; /* Hides the scroll bar y-axis */ 
    } 
    .windy-demo ul.wi-container li img { 
     width: 100%; /* makes the image fit 100% of available space */ 
     height: auto; 
    } 
    .windy-demo h4 { 
     padding: 0 10px; 
     line-height: 26px; 
     margin: 0; 
    } 
    .windy-demo ul.wi-container li { 
     padding: 0; 
     border: 10px solid #fff; 
     -webkit-user-select: none; 
     -khtml-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
     user-select: none; 
    } 
    #slider ......