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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 23:32:44  来源:igfitidea点击:

No img-responsive in Bootstrap 4

imagetwitter-bootstrap

提问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.cssdist文件夹不存在了。

What happend to it??

它怎么了??

回答by Boxiom

From the Bootstrap 4 documentation:

来自Bootstrap 4 文档

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:

Bootstrap 4 图片中:

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

Use img-fluid class instead of img-responsive

使用 img-fluid 类而不是 img-responsive

see docs

查看文档

回答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

查看结果:图像缩略图