Question

我正在建立一个具有引导程序的响应式网站，当屏幕分辨率更改时，我无法在其div包装器中调整图像。我查找了其他解决方案，它的确提供了很多信息，并且很难知道哪个解决方案适合我的情况。我尝试了一些建议的解决方案，但都没有解决我的问题。

我插入了图像，但更改屏幕分辨率后，它们似乎超出了边框宽度。我尝试使用Internet上发现的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;
}

屏幕分辨率更改时，调整图像大小以适合div

1 个答案: