jQuery 如何创建在 Bootstrap 3 中也可以放大的响应式图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18903183/
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 to create a responsive image that also scales up in Bootstrap 3
提问by user2796803
I am currently using twitter bootstrap 3 and I am facing a problem to create a responsive image. I have used img-responsiveclass. But the image size is not scaling up. If I use width:100%instead of max-width:100%then it works perfectly. Where is the problem? This is my code:
我目前正在使用 twitter bootstrap 3，但我在创建响应式图像时遇到了问题。我用过img-responsive类。但是图像大小没有按比例放大。如果我使用width:100%而不是max-width:100%那么它完美地工作。问题出在哪儿？这是我的代码：
<div class="col-md-4 col-sm-4 col-xs-12 ">
<div class="product">
<div class="product-img ">
<img class="img-responsive" src="img/show1.png" alt="" />
</div>
</div>
</div>
回答by isherwood
Bootstrap's responsive image class sets max-widthto 100%. This limits its size, but does not force it to stretch to fill parent elements larger than the image itself. You'd have to use the widthattribute to force upscaling.
Bootstrap 的响应图像类设置max-width为 100%。这限制了它的大小，但不会强制它拉伸以填充比图像本身更大的父元素。您必须使用该width属性来强制升级。
回答by Omar El Don
Sure things!
肯定的事情！
.img-responsiveis the right way to make images responsive with bootstrap 3
You can add some height rule for the picture you want to make responsive, because with responsibility, width changes along the height, fix it and there you are.
.img-responsive是使用 bootstrap 3 使图像具有响应性的正确方法您可以为要响应的图片添加一些高度规则，因为责任，宽度沿高度变化，修复它就可以了。
回答by Gil
Not sure if it helps you still... but I had to do a small trick to make the image bigger but keeping it responsive
不确定它是否仍然对你有帮助......但我不得不做一个小技巧来使图像更大但保持响应
@media screen and (max-width: 368px) {
img.smallResolution{
min-height: 150px;
}
}
Hope it helps P.S. The max width can be anything you like
希望它可以帮助 PS 最大宽度可以是你喜欢的任何东西
回答by Bruno Fondevila
If setting a fixed width on the image is not an option, here's an alternative solution.
如果在图像上设置固定宽度不是一个选项，这里有一个替代解决方案。
Having a parent div with display: table & table-layout: fixed. Then setting the image to display: table-cell and max-width to 100%. That way the image will fit to the width of its parent.
有一个带有 display: table & table-layout: 固定的父 div。然后设置要显示的图像：table-cell 和 max-width 为 100%。这样图像将适合其父级的宽度。
Example:
例子：
<style>
.wrapper { float: left; clear: left; display: table; table-layout: fixed; }
img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
<img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>
Fiddle: http://jsfiddle.net/5y62c4af/
回答by Xinoon
Try the following in your CSS stylesheet:
在您的 CSS 样式表中尝试以下操作：
.img-responsive{
max-width: 100%;
height: auto;
}
回答by Xinoon
Try to do so:
尝试这样做：
1) In your index.html
1) 在你的 index.html
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
</a>
</div>
2) In your style.css
2）在你的style.css
.ratio {
position:relative;
width: 100%;
height: 0;
padding-bottom: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
回答by MikeyC
I found that you can put the .col class on the image will do the trick - however this gives it extra padding along with any other attributes associated with the class such as float left, however these can be cancelled by say for example a no padding class as an addition.
我发现您可以将 .col 类放在图像上就可以了 - 但是这会为其提供额外的填充以及与该类相关的任何其他属性（例如向左浮动），但是这些可以通过例如无填充来取消类作为补充。
回答by user447320
I guess image is than corrupted. Example: image size is 195px X 146px.
我猜图像比损坏。示例：图像大小为 195 像素 X 146 像素。
It will work inside lower resolutions like tablets. When you have 1280 X 800 resolution it will force larger as there is also width 100 %. Maybe CSS inside media query like icons fonts is the best solution.
它将在平板电脑等较低分辨率下工作。当您有 1280 X 800 分辨率时，它会强制更大，因为宽度也为 100%。也许像图标字体这样的媒体查询中的 CSS 是最好的解决方案。
