html - 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;
    }

但是如果我删除 float:left;并显示:内联 block ；来自媒体链接类的样式，然后图像在浏览器窗口大小变化时调整大小。但是我无法删除这两个属性，因为下一个带有“媒体容器”类的内容需要出现在右侧。我尝试了多种方法，例如添加 float :留在链接之前的div中但失败了。请建议我。

Answer 1

如果您使用的是 bootstrap 3，那么您可能需要将“img-responsive”类添加到“img”标签中。