Javascript 如何使用 Bootstrap 调整图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29641526/
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
How can images be resized using Bootstrap
提问by Hitz
I have a website about products. Each product article has text and some images in it. The images range from 400px width to some going up to 700px width. The product article is stored in a SQL Server database and the article is fetched dynamically based on the productid.
我有一个关于产品的网站。每篇产品文章都有文字和一些图片。图像范围从 400 像素宽度到一些高达 700 像素的宽度。产品文章存储在 SQL Server 数据库中，并根据 productid 动态获取文章。
I am using Bootstrap to make my website mobile friendly. I have a two column layout. The product article is contained in a Div marked with a
我正在使用 Bootstrap 使我的网站对移动设备友好。我有一个两列布局。产品文章包含在标有
class="col-md-12 row"
When I shrink the size of the page to preview how it would look in a mobile device the text nicely adjusts itself, however the images don't. Now i have about 3000 such images and if there is an attribute that I have to apply to every individual image tag, that won't be feasible.
当我缩小页面大小以预览它在移动设备中的外观时，文本会很好地自行调整，但图像不会。现在我有大约 3000 张这样的图像，如果我必须将一个属性应用于每个单独的图像标签，那将是不可行的。
Is there any other way using CSS or bootstrap or javascript where I can reduce the size of the image for a device size, keeping the image aspect ratio intact ?
有没有其他方法可以使用 CSS 或 bootstrap 或 javascript 来减小设备尺寸的图像大小，同时保持图像纵横比不变？
回答by Tom
Just add this somewhere in your stylesheet and it will apply to all images on your site.
只需在样式表中的某处添加它，它就会应用于您网站上的所有图像。
img {
display: block;
max-width: 100%;
height: auto;
}
回答by user2024285
Use class="img-responsive" in the image tag. This will automatically adjust the size based on the screen size. Its a bootstrap class.
在图像标签中使用 class="img-responsive"。这将根据屏幕大小自动调整大小。它是一个引导程序类。
Ex: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_responsive&stacked=h
例如：http: //www.w3schools.com/bootstrap/tryit.asp?filename =trybs_img_responsive&stacked= h
回答by Haresh Shyara
Try to this.
试试这个。
<div class="row">
<div class="col-md-4">
<img class="thumbnail img-responsive" src="h.jpg" />
</div>
</div>
回答by Linkbot _
Try adding this to css
尝试将此添加到 css
.col-md-12 img {width:100%}
