画像をウィンドウサイズとして手動で変更

Question

ウィンドウサイズに合わせて画像の幅と高さを設定するためにjsを使用しました。しかし、ブラウザが非常に広い場合には、画像の高さがすべての父要素の高さを超えている場合があります。その結果、画像の下部は表示されません。これをどうすれば解決できますか？

私はこのプロジェクトでブートストラップとスワイパーを使用しました。変更したい画像は私のスワイパー部門の中にあります。私はすべての画像の父の要素の高さを100％に設定しました。ここで私のjsのコードを変更するには、イメージが体系的です。画像サイズは2560×1440です。

if(winWidth/winHeight < 2560/1440) { 
    imgHeight = winHeight; 
    imgWidth = winHeight/1440 * 2560; 
    }else { 
    imgWidth = winWidth; 
    imgHeight = winWidth/2560 * 1440; 
    } 
    attr = "width:" + imgWidth + 'px;height:' + imgHeight + 'px;margin-left: -' + imgWidth/2 + 'px;margin-top:-' + imgHeight/2 + 'px'; 
    $('.main .swiper-slide > img').attr('style',attr); 

PS： 申し訳ありませんが、わかりませんでした。あなたが提供した以下のメソッドは、画像を垂直方向に拡大/縮小し、ページ内に空白を残します。実際には、垂直のウィンドウや水平のウィンドウに関係なく、イメージの高さがウィンドウの高さ全体を占めるようにしたい。ウィンドウの幅が十分に広い場合、イメージの幅はウィンドウの幅に等しく、そうでなければイメージを幅でカットし、ウィンドウの幅と同じにします。

Answer 1

@patstuartが正しい場合は、CSSを使用して直接処理する方がはるかに優れています。 JavaScriptの単一行を書くことなく、どれだけ多くのスタイリングの問題が解決できるかは非常に驚くべきことです。あなたの2番目の質問に答えるために、CSSでそれをどうやって行うことができるかを考えてみましょう。フィドルや実際のページ/イメージを見ることなく、私はちょうどここのヒップから撃つでしょう。私が正しく理解していれば、画面の幅/高さに関わらず、完全な画像を正しい比率で表示することができます。

.main .swiper-slide { 
    width: 100%; 
    height: 0; 
    /* Padding bottom should be the height's ratio to the width. 
    Which in this case, would be 56.25% */ 
    padding-bottom: 56.25%; 
} 
.main .swiper-slide > img { 
    width: 100%; 
} 

アスペクト比はCSSで扱うことができる方法である。そのような場合、ここで素敵な小さなトリックです。それがあなたの問題を解決するかどうか、または他の質問がある場合はお知らせください。 CSSはスタイリングのために作られたので、常に最初にソリューションを探します。