Изображение не реагирует на загрузку

Question

Я использую Bootstrap, и у меня есть большое изображение размером около 3000 x 2000 пикселей. Я хочу, чтобы изображение было отзывчивым, когда оно загружалось в стиле, называемом шириной вызова 300 и высотой 300 пикселей. Как сделать отзывчивость моего изображения, не испортив изображение?

<li data-thumb-alt="" style="width: 350px: height : 300px; margin-right: 30px; float: left; display: block;"> 
    <div class="features"> 
     <img style="" class="img img-responsive" src="/Content/BusinessProfileImages/747f651f.jpg" alt="alternate text here" draggable="false"> 
     <div class="container_address"> 
      <a href="/Home/BusinessDetail?BusinessId=436&amp;AppointmentID=0"> 
     </div> 
    </div> 
</li> 

.features img { 
    margin: 0 auto; 
    width: 100%; 
    padding-buttom: 3px; 
    margin-top: 1px; 
    float:left; 
} 

Answer 1

An «IMG» тег предназначен для отображения всего изображения, так что он будет делать то, что может изменить соотношение сторон в соответствии с вашими границы. Если вам нужно, чтобы изображение реагировало без его первоначального соотношения сторон, опция заключается в том, чтобы использовать его в качестве фонового изображения внутри контейнера. Проблема с этим методом заключается в том, что, поскольку вы не сохраняете исходное соотношение сторон, у вас будут проблемы с отсечением краев изображения.

Вот некоторые полезные ссылки на background-size и background-position, используя их сочетание, позволяющее увеличить масштаб изображения в центре фонового изображения, чтобы не реагировать на размер, не искажая пропорции.