[英]image not resizing in twitter bootstrap responsive page design
I have a web page which is designed using twitter bootstrap along with it's responsive css inclusion to make everything responsive on different window sizes.But the image in the following codes not re-sizing itself when browser resized, so is not showing responsiveness 我有一个网页设计为使用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;
}
but if i remove float:left; 但是如果我删除float:left; and display:inline-block;
并显示:inline-block; styles from media-link class then image is resizing on browser window size changes.But i can't remove these two properties because next content with class "media-container" need to be appear on right.I tried in many ways like adding float:left in the div before link but failed.Please suggest me.
媒体链接类的样式,然后图像会随着浏览器窗口大小的变化而调整大小。但是我无法删除这两个属性,因为下一个“媒体容器”类的内容需要显示在右边。我尝试了多种方式,例如添加了float :链接前留在div中,但失败。请建议我。
如果您使用的是引导程序3,则可能需要在“ img”标签中添加“ img-sensitive”类。
You can take styles from Bootstrap 3 and apply for your code: 您可以从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;
}
If you are using bootstrap 3 which you should. 如果您使用的是Bootstrap 3,则应该这样做。 Then just add class img-responsive to img tag.
然后,只需添加img响应类到img标签即可。 and That's all to make it responsive.
而这就是使其具有响应能力。
Here is CDN link for bootstrap3 css. 这是bootstrap3 css的CDN链接。 You don't even need to add bootstrap-responsive css.
您甚至不需要添加响应引导的CSS。
//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" //netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css”
In case bootstrap 2.3 existing problem use this- 万一bootstrap 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.