<img> 元素应该相对于其父元素的宽度响应地调整大小，而不超过其原始大小答案

【问题标题】：<img> element should responsively resize, relative to the width of its parent element, without exceeding its original size<img> 元素应该相对于其父元素的宽度响应地调整大小，而不超过其原始大小
【发布时间】：2022-05-03 03:20:18
【问题描述】：

我开始在 codepen 上开发致敬页面项目，通过了 9 个测试用例。尝试了所有方法，但无法通过最后一个测试用例。

我的 CSS 代码

#img-div {
  display: block;
  filter: grayscale(100%);
  width: 100%;
} 

#img {
   display: block;
   margin-left: auto;
   margin-right: auto;
   height: auto;
   padding-top: 10px;
   max-width: 100%; 
}

Here is my project.

【问题讨论】：

你快到了:)。您只是忘记使用正确的选择器。现在您正在使用#img 选择器，但图像的ID 为image。

标签： css responsive-design

【解决方案1】：

除了你应该修复的使用过的 CSS 选择器：在给定的width 中，只需添加一个像素值等于图像原始宽度的max-width。

【讨论】：

【解决方案2】：

这个想法是使用之前 freeCodeCamp 课程中的 Bootstrap CSS 库，在这种情况下，您需要在 HTML 文档的顶部添加链接：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

一旦有 Bootstrap 链接，您只需将 class="img-responsive" 添加到您的图像元素，图像会适当调整大小并通过测试。

【讨论】：