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

Question

我开始在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%; 
}

这是我的项目。

Answer 1

除了您应该修复的使用的CSS选择器之外：只需将像素值等于图像原始宽度的max-width添加到以百分比表示的给定width。

Answer 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"添加到图像元素中，图像就会适当调整大小并通过测试。