圖像不調整大小在twitter引導響應頁面設計

我有一個網頁，它是使用twitter引導與它的響應CSS包容設計，使一切響應不同的窗口大小。但下面的代碼中的圖像不重新調整自己本身當瀏覽器調整大小，所以沒有顯示響應圖像不調整大小在twitter引導響應頁面設計

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

但如果我刪除浮動：左;並顯示：inline-block;來自媒體鏈接類的樣式，然後圖像調整瀏覽器窗口大小changes.But我不能刪除這兩個屬性，因爲類「media-container」的下一個內容需要出現在右邊。我嘗試了很多方式，如添加浮動：在鏈接前留在div中，但失敗了。請告訴我。

來源

2013-12-12 mks

如果您使用引導程序3，那麼您可能需要將'img-responsive'類添加到'img'標記。

來源

2013-12-12 23:01:50 carter

沒有它引導2.3版本 – mks

您可以從引導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; 
}

來源

2013-12-13 00:10:42

它似乎工作，但給一個浮動：左圖像，而不是它的容器鏈接元素，你認爲這是沒有錯誤的？此外如何最大寬度50％的作品？ – mks

它會使所有圖像響應，並更好地使用100 ％。您可以從這篇文章中閱讀更多詳細信息：http://unstoppablerobotninja.com/entry/fluid-images/。其他規則，例如'float：left; di splay：block'我從Bootstrap3中拿出 –

如果您正在使用引導3，你應該。然後，只需將img-responsive類添加到img標籤即可。這就是爲了讓它響應。

這是bootstrap3 css的CDN鏈接。你甚至不需要添加引導響應的CSS。

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

如果引導2.3存在的問題，使用這 -

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

來源

2013-12-13 01:29:15 ravisuhag

我應用了你的樣式，它顯示的圖像寬度一開始就小於它的默認大小，這不是預期的。同樣，media-container div變成底部不正確。 – mks

你可以做一個小提琴或plunkar，我會做出改變....？ – ravisuhag

圖像不調整大小在twitter引導響應頁面設計

回答

相關問題