ブートストラップカルーセル：さまざまな画面解像度に異なるサイズの画像を使用するにはどうすればよいですか？

Question

パフォーマンス上の理由から、私はカルーセルスライドとして、デスクトップ用のサイズの大きいイメージとモバイルデバイス用のサイズの小さなイメージを使用したいと考えています。

Iは、限られた成功したコードの下にしようとした：s2m.jpgデフォルト（小）画像とs2.jpgが大きい方である

<picture> 
    <source srcset="images/s2.jpg" media="(min-width: 768px)"> 
    <source srcset="images/s2m.jpg"> 
    <img class="second-slide" srcset="images/s2m.jpg" alt="2"> 
</picture> 

を。

カルーセルが動作し、画面サイズに応じて正しいイメージが選択されますが、元の応答性は失われます。つまり、スライドは親要素（.item）の幅にリサイズされません。代わりに、それらはちょうど切り取られます。

これを達成する適切な方法は何ですか？

Answer 1

実際には、ウィンドウのサイズを変更すると、幅の変化に対応するために、カルーセルの高さが減少することはありません。これにより、ページの表示が歪められます。これはブートストラップカルーセルの特徴です。

応答性に関しては、小さなデバイスでページを読み込むと（デスクトップブラウザでサイズを変更しないことを意味します）、関連するスライドイメージが読み込まれるだけです。私はこれがあなたのために働くはずだと思います。あなたは幅が減少したときの高さで画像のサイズを変更するために必要な場合

---

しかし、あなたは

img{ 
    width: 100%; 
} 

情報については、このcodepenを参照してくださいCSSを使用して達成することができます。

注：>すべての< IMGにスタイルを課すことをしたいので、賢明に問題がHiSRC枠組みで解決することができ、私の意見では

Answer 2

使用しない可能性があります - https://github.com/teleject/hisrcを。

<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/> 

をし、あなたのスクリプトでは、次のjQueryのコードを挿入します。たとえば

：あなたはそれで異なるサイズの画像ソースを定義するための属性データ-1Xまたは-Tag内のデータ-2Xを使用することができますhiSRC-フレームワークを "活性化" と絵の周りの要素にクラス "hisrc" を与える：

$(document).ready(function(){ 
    $(".hisrc img").hisrc(); 
    $(".hisrc img+img").hisrc({ 
    useTransparentGif: true, 
    speedTestUri: '50K.jpg' 
    }); 
}) 

---

<div class="hisrc"> 
    <img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/> 
</div> 

うまくいけば、それはあなたのために便利です。）

Answer 3

ただ、CSSクラスを作成し、次のようにそれを使用する：スタックオーバーフローへ

.fitImage { 
    width: 100%; 
    box-sizing:border-box; 
} 

<picture> 
    <source srcset="images/s2.jpg" media="(min-width: 768px)"> 
    <source srcset="images/s2m.jpg"> 
    <img class="fitImage second-slide" srcset="images/s2m.jpg" alt="2"> 
</picture>