屏幕分辨率更改時調整圖像大小以適合 div

Question

我正在使用引導程序構建一個響應式網站，當屏幕分辨率發生變化時，我在將圖像放入其 div 包裝器時遇到問題。 我已經查找了其他解決方案，它確實有很多信息，很難知道哪一個適合我的情況。我嘗試了一些建議的解決方案，但沒有一個能解決我的問題。

我插入了圖像，但是當屏幕分辨率更改時，它們似乎超出了邊框寬度。 我嘗試了一些使用 css 的解決方案，在互聯網上發現它並沒有解決問題。 我確實嘗試使用 Jquery，它可以解決，但我需要為每個屏幕分辨率使用不同的圖像（使用我的算法）。 我認為如果有人可以幫助我找到我將非常感激的簡單解決方案，我認為必須有一個更簡單的方法。

<div class="container  imagegallery" >
    <div class="row imagerow ">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 ">
            <div  class="img-wrapper" id='women-shirts'>
                 <img class= "img-responsive" 
                  src="img/womens-t-shirts.png" alt="womens shirts" />
        </div>
    </div>
 <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
    <div class="img-wrapper" id='women-pants'>
      <img class= "img-responsive" 
               src="img/womens-pants.jpg" alt="womens pants"  />
       </div>
     </div>
</div>
if(windows.width<798)
{
     $('#women-pants').empty();
     $('#women-pants').append('<img class= "img-responsive" 
       src="img/womens-pants-mobile.jpg" alt="womens pants"  />');
     $('#women-shirts').empty();
     $('#women-shirts').append('<img class= "img-responsive" 
       src="img/womens-t-shirts-mobile.png" alt="womens pants"  />');

}
else
{
     $('#women-pants').empty();
     $('#women-pants').append('<img class= "img-responsive" 
      src="img/womens-pants.jpg" alt="womens pants"  />');
     $('#women-shirts').empty();
     $('#women-shirts').append('<img class= "img-responsive" 
      src="img/womens-t-shirts.png" alt="womens pants"  />');

}

Answer 1

這可能是因為您的圖像沒有定義的寬度。

給你的圖片一個 width 或 max-width 屬性：

img{
 max-width: 100%;
 height: auto;
}