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”标签中。