使用 CSS3 响应性地调整图像的大小，相对于其父元素的宽度，不超过其原始大小答案

【问题标题】：Responsively resize an image using CSS3, relative to the width of its parent element, without exceeding its original size使用 CSS3 响应性地调整图像的大小，相对于其父元素的宽度，不超过其原始大小
【发布时间】：2020-10-06 09:14:15
【问题描述】：

我开始在 CodePen.io 上构建一个 Tribute 页面，遵循用户故事并在 10 次测试中获得了 9 次。我一直坚持使用 CSS3 调整图像大小。我用谷歌搜索，尝试了答案，但没有一个对我有用。 CSS 代码是：

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

img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
}

这里是 CodePen 页面的链接https://codepen.io/dansia/pen/NWxNMJP 看看它并帮助我解决这个挑战。

【问题讨论】：

如果你想让图像以最大宽度响应，那么你必须在img元素上同时定义width和maximum-width。例如，img { width: 100%; maximum-width: 330px }
不，你不需要两者。你只需要max-width，图像就会增长到最大的自然宽度。看this jsfiddle。这就是你要找的吗？
这能回答你的问题吗？ CSS image max-width set to original image size?

标签： html css web

【解决方案1】：

请尝试此代码以供参考

img
{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

试试这个对你有帮助的东西......

@media (min-width:500px) {
  /*Class name*/ {
    /*properties*/
  }
}
@media (max-width:499px) {
  /*Class name*/ {
    /*properties*/
  }
}

【讨论】：

【解决方案3】：

#img-div {
  position: relative;
  height: 500px;
  width: 500px;
}
#image {
  position: absolute;
  max-width: 100%;
}

【讨论】：

考虑添加关于您的代码如何回答问题的说明，因为仅代码的答案不太有用。尤其是当有其他以前的答案时，最好解释一下您的答案与其他答案有何不同或改进。
您甚至可以将 cmets 添加到您的代码中以便更好地理解。

【解决方案4】：

我使用它来使图像居中并使其相对于父级的宽度。

#image {
    display: block;
      
    max-width: 100%;
    
    margin-left: auto;
    
    margin-right: auto;
    
}

你也可以使用width: 100%;把图片放大到页面的中心，但是这样你就愚弄了程序，这是不公平的。

【讨论】：

【解决方案5】：

#img-div{  
  width: 50%; <!--depends on the image resolution and its appearance in the page-->
  background: white;
  margin: auto; <!--centering the image-->
  padding: 15px;
}

#image{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

【讨论】：

虽然此代码可能会回答问题，但通常在代码周围添加一些上下文以使此答案更有帮助。
检查stackoverflow.com/questions/18113056/…

【解决方案6】：

这就是我所做的

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

img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
  **margin-left: auto;
  margin-right: auto;
  display: block;**
}

【讨论】：

【解决方案7】：

我一直在做同样的项目。

#img-div {
    margin: auto;
    width: 97%;
    padding-bottom: 10px;
}

#image {
    max-width: 90%;
    display: block;
    margin: auto;
}

为什么是 90%？至于挑战，我们不希望图像占据容器的整个宽度。添加这些属性后，无论我如何调整页面大小，图像都不会超出容器，它会响应

【讨论】：

【解决方案8】：

我用过这个：

#image {
  width:100%;
  height:auto;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
  display:block;
}

【讨论】：

【解决方案9】：

命令

    image { 
   max-width: 100%; 
   height: auto;
}

通常就足够了。但是 codepin 测试代码的方式是同时搜索 width 和 max-width

但是，人们说您应该将 max-width 指定为 330。我只是不知道如何获取此图像具有此宽度的信息，因此我不得不找出另一种方法。所以它是（并且它通过了测试）：

  #img-div{
  background-color: white;
}

  #image {
  max-width: 100%;
  width: 100%;
  display: block;
  height: auto;
  }

你可以在这里查看我的 codepin 项目：https://codepen.io/asserelfeki/pen/LYNOEVJ

【讨论】：

【解决方案10】：

我在 img 元素，它对我有用。终于拿到了10/10。

那么整个代码就是：

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

img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
  **margin-left: auto;
  margin-right: auto;
  display: block;**
}

感谢您的建议。

【讨论】：

【解决方案11】：

您是否尝试过从您的 div 调用它？

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

#img-div img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
}

<div id=“img-div”>
 <img href=“something”/>
</div>

【讨论】：

那么，如果你想让你的图片调整大小，让你的宽度更小，但在#img-div的图像容器中。

【解决方案12】：

此链接包含您应该需要的内容： https://www.freecodecamp.org/forum/t/tribute-page-responsively-resize-img-relative-to-parent-element/203586

万一链接不起作用的代码：

#image {
max-width: 250px; <!--Base width-->
width: 100%; <--Size according to parent use percentage-->
display: block;
margin: auto; <!-- center the image -->

}

【讨论】：

这属于评论。它并没有具体解决他的问题。
@ShivanshTheAmazing 感谢您分享链接。我在那里复制了一个对我有用的代码。