html 图片找不到 不显示器,关于html：尽管使用了’img-fluid’类，但图像无法完全响应...

我在img标签中使用了img-fluid类，但是我的图像没有完全响应。 它对较小的屏幕有响应，但在屏幕放大到特定尺寸后变得无响应。

我已经阅读了如何使用引导程序使图像响应而不占用整个分区的宽度？ 和Bootstrap：img响应vs img流体，但无法解决问题。

这是我尝试的方式

HTML：

AUST CSE

CSS：

.wrapper {

width: 100%;

}

在较小的屏幕中，页面如下所示：

但是，在较大的屏幕上，图像不会占据100％的空间，看起来像这样：

我希望图像占据宽度的100％并按比例放大其高度，就像屏幕较小时一样。

您可以为您的代码创建一个有效的示例，以便我们准确了解您使用的样式吗？

图片的实际宽度是多少？

img-fluid使用max-width: 100%;。一旦包含元素的大小等于或大于图像的宽度，它将停止调整大小。

两种选择：

1)使用分辨率至少为容器元素最宽的图像。如果容器元素的宽度没有固定的顶端(即始终为视口宽度的80％)，请选择足够大的图像，以使其在大多数显示器上看起来都不错(大多数常用浏览器的查找统计信息决议)。

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );

/* For demo purposes and is not required. */

.demo {

background-color: rebeccapurple;

}

Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.

Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.

Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.

2)覆盖.img-fluid，以便图像的大小将超出原始分辨率。此处的缺点是图像会变得粗糙。原始分辨率越小，缩放到较大区域时，它将越有粒状感。您可以在我的示例中看到文本非常模糊。

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );

/* For demo purposes and is not required. */

.demo {

background-color: rebeccapurple;

}

/* Will override all instances of .img-fluid. */

.img-fluid {

width: 100%;

}

Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.

Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.

Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.

我还在下面提供了一个范围界定示例，该示例使您可以仅覆盖特定图像以超出其原始分辨率。

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );

/* For demo purposes and is not required. */

.demo {

background-color: rebeccapurple;

}

/* Scoped so that we can target specific images. */

.img-fluid.img-full-width {

width: 100%;

}

如果要在较大的屏幕上将图像跨过页面的整个宽度，则需要确保图像的宽度与屏幕的宽度一样大。

根据您的问题，看起来您的尺寸不够大。 img-fluid类将调整图像的大小，但只能调整为最大尺寸。

您可以修复2件事情中的1件。

(首选方法)为所需的最大尺寸屏幕选择具有正确宽度的图像。 (大多数情况下为1920像素)

您可以在图像中添加width: 100%，以使其覆盖页面的整个宽度。但是，如果图像的宽度小于屏幕的宽度，则图像将不那么清晰，这就是为什么最好使用正确尺寸的图像的原因。

例：

这是一个尺寸较小的图像(您的问题)：JSFiddle

.container {

border: 2px solid red;

}

Image

The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):

这是一个具有较大尺寸(1920像素)的图像：JSFiddle

.container {

border: 2px solid red;

}

Image

The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):

有几个建议可以改善您的示例：1)向容器元素添加边框或背景色，因为不清楚包含元素的宽度是多少，并且其中的图像没有拉伸整个宽度。 2)创建堆栈片段而不是JSFiddles，这样所有内容都在SO上，并且无需担心第三方站点关闭并导致链接无效。

@hungerstar感谢您的提示。 我通常将示例放到SO本身中，但是当它与响应性有关时，我发现在JSFiddle中更容易显示其功能。

@hungerstar Ive在问题中直接添加了代码，并添加了边框，以便您可以看到容器。

非常好。 有时候JSFiddle可以做的比Stack Snippet还要多。 但是，如果不需要该好处，我将始终使用Stack Snippet。