изменение размера изображения, чтобы поместиться в div при изменении разрешения экрана

Question

Я создаю адаптивный веб-сайт с загрузчиком, у меня проблема с размещением изображения в оболочке div при изменении разрешения экрана.Я искал другое решение, оно действительно перегружено множеством информации, и трудно понять, какое из них подходит для моей ситуации. Я пробовал несколько предложенных решений, но ни одно из них не решило мою проблему.

Iвставленное изображение, но кажется, что оно имеет ширину рамки при изменении разрешения экрана.Я попытался несколько решений с использованием 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;
}