Html 使用 twitter-bootstrap 调整大小的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11862707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resizeable Image using twitter-bootstrap
提问by Akash Soti
I am trying twitter's framework to develop my own site and I want my image to resize as the browser size is decreased. I am confused and tried everything but couldn't come up with a solution here is my structure
我正在尝试使用 twitter 的框架来开发我自己的网站，并且我希望我的图像随着浏览器大小的减小而调整大小。我很困惑并尝试了一切，但无法想出解决方案，这是我的结构
HTML
HTML
<section id="intro">
<div class="row" id="ruby">
<div class="span6" id="heading">
<h1>Journey Into Ruby and Beyond</h1>
<p>A blog about my journey into ruby, my experiences and lots of fun!</p>
</div>
<div class="span6" id="pic" align="right">
<p>Akash Soti<br>RoR Developer<br>@xyz company </p>
</div>
</section><!--/intro-->
CSS
CSS
#ruby.row{
margin-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
#pic{
background: url(img/Akash.png);
background-repeat: no-repeat;
height: 150px;
width: 200px;
margin-left: 200px;
}
#pic img{
max-width:100% ;
max-height:100% ;
display:block;
}
#pic p{
position: relative;
right: 110px;
margin-top: 90px;
margin-left: 0px;
text-align: left;
}
回答by Mark
Twitter bootstrap is designed to make images (and layout) responsive, that is images in your content:
Twitter bootstrap 旨在使图像（和布局）具有响应性，即内容中的图像：
<img src="path/to/images.jpg" alt="some">
<img src="path/to/images.jpg" alt="some">
Not the images you used as background-images in CSS.
不是您在 CSS 中用作背景图像的图像。
回答by Avdept
You have to use
你必须使用
@media (max-width: 699px) {
#pic{
background: url(img/Akash.png);
background-repeat: no-repeat;
height: 100px;
width: 150px;
margin-left: 200px;
}
}
But if you want responsive design, try to avoid pixels, use %. And if your background meant to be picture(e.g. photo, pic) but not background-kind of image, use <img>instead
但是如果你想要响应式设计，尽量避免像素，使用 %. 如果您的背景是图片（例如照片，图片）而不是背景类型的图片，请<img>改用
