twitter-bootstrap Bootstrap 4 中没有 img 响应
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/34811268/
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
No img-responsive in Bootstrap 4
提问by Vahid Amiri
I just downloaded the source code for Bootstrap 4 alpha 2 and can't find the class img-responsivein it. It exists in Bootstrap 3 source code and I can find it with Notepad++ but in Bootstrap 4s bootstrap.cssin distfolder it doesn't exist.
我刚刚下载了 Bootstrap 4 alpha 2 的源代码,但img-responsive在其中找不到该类。它存在于引导3的源代码,我可以用记事本+ +,但在引导4S发现它bootstrap.css在dist文件夹不存在了。
What happend to it??
它怎么了??
回答by Boxiom
From the Bootstrap 4 documentation:
Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Bootstrap 中的图像使用 .img-fluid 进行响应。最大宽度:100%;和高度:自动;应用于图像,使其与父元素一起缩放。
回答by Tahir77667
Bootstrap 3:.img-responsive
引导程序 3:.img-responsive
Bootstrap 4:.img-fluid
引导程序 4:.img-fluid
As in Bootstrap 4 Images:
Images in Bootstrap 4 are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Bootstrap 4 中的图像使用 .img-fluid 进行响应。最大宽度:100%;和高度:自动;应用于图像,使其与父元素一起缩放。
<img class="img-fluid" src="" alt=""> //This will make your image responsive
回答by Arnab Chakraborty
It seems you need to use a new class img-fluid instead of img-responsive if you are using Bootstrap 4 alpha 2. Have a look at : http://v4-alpha.getbootstrap.com/content/images/
如果您使用的是 Bootstrap 4 alpha 2,您似乎需要使用一个新类 img-fluid 而不是 img-responsive。看看:http: //v4-alpha.getbootstrap.com/content/images/
回答by Abdul Basit
回答by Muhammadim Yusoff Jamaluddin
In Bootstrap 4 you can use class="img-fluid".
在 Bootstrap 4 中,您可以使用 class="img-fluid"。
This is the explaination:
这是解释:
Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: >auto; are applied to the image so that it scales with the parent element.
Bootstrap 中的图像使用 .img-fluid 进行响应。最大宽度:100%;和高度:>自动;应用于图像,使其与父元素一起缩放。
This is the code as suggested:
<img src="..." class="img-fluid" alt="Responsive image">
这是建议的代码:
<img src="..." class="img-fluid" alt="Responsive image">
回答by Anand Raja
Boostrap 4 is using .img-fluidclass.
Boostrap 4 正在使用.img-fluid类。
For more references Boostrap changes for image
有关更多参考Boostrap 更改图像
回答by alvaro fvr
You can also use .img-thumbnailthat is the same of .img-fluidbut also give an image a rounded 1px border appearance.
您也可以使用.img-thumbnail相同的.img-fluid但也给图像一个圆形的 1px 边框外观。
Look the result: Image thumbnails
查看结果:图像缩略图

