изображение не изменяет размер в twitter bootstrap отзывчивый дизайн страницы

Question

У меня есть веб-страница, которая разработана с использованием twitter bootstrap вместе с ее отзывчивым включением css, чтобы все реагировало на разные размеры окна. Но изображение в следующих кодах не переустанавливается самостоятельно при изменении размера браузера, поэтому не отображается отзывчивость

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span"> <div class="media"> 
    <a href="http://facebook.com" target="_blank" class="media-link"><img class="mod-picture" src="images/picture.jpg" alt="post picture" /></a> <div class="media-container"><a class="link-name" href="#" target="_blank">media name</a></div> 
    </div></div></div></div> 

    In css file styles are - 
    .media-link 
    { 
      float:left; 
     border:1px solid #ccc; 
     display:inline-block; 
     color:#3B5998; 
     cursor:pointer; 
     margin-right:5px; 
    } 
    .mod-picture{ 
     margin-right:10px; 
     border:0; 
     display:block; 
     margin:3px; 
    } 

, но если я удалю поплавок: влево; и отображение: встроенный блок; стилей из класса медиа-ссылок, тогда изображение изменяет размер при изменении размера окна браузера. Но я не могу удалить эти два свойства, потому что следующий контент с классом «media-container» должен появиться справа. Я пытался разными способами добавить добавление float : осталось в div до ссылки, но не удалось. Пожалуйста, предложите мне.

Answer 1

Если вы используете bootstrap 3, вам может потребоваться добавить класс 'img-responsive' в ваш тег 'img'.

Answer 2

Вы можете взять стили из Bootstrap 3 и подать заявление на получение кода:

<a href="http://facebook.com" target="_blank" class="media-link"> 
    <img class="mod-picture" src="images/picture.jpg" alt="post picture" /> 
</a> 

.media-link{ 
    //nothing styles 
} 

.mod-picture{ 
    // max width of image 
    max-width: 50%; 
    float: left; 
    display: block; 
    border:1px solid #ccc; 
} 

Answer 3

Если вы используете загрузочный 3, который вы должны. Затем просто добавьте класс img-отзыв к тегу img. и это все, чтобы сделать его отзывчивым.

Ссылка для CDN для bootstrap3 css. Вам даже не нужно добавлять bootstrap-отзывчивый CSS.

//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css»

В случае самозагрузки 2.3 не существующие проблемы использования this-

<div class="container-fluid"> 
<div class="row-fluid"> 
    <div class="span-12"> 
    <div class="media"> 
    <a href="http://facebook.com" target="_blank" class="media-link"> 
     <img class="mod-picture" src="images/picture.jpg" alt="post picture" /> 
    </a> 
    <div class="media-container"> 
     <a class="link-name" href="#" target="_blank">media name</a> 
    </div> 
    </div> 
    <div style="clear:both"></div> 
    </div> 
    </div> 
</div> 


.mod-picture{ 
    width:40%; 
    padding:5%; 
    max-width: 200px; 
    height:auto; 
    float:left; 
} 
.media-container{ 
    display:inline-block; 
}