使用 CSS3 響應地調整圖像的大小，相對於其父元素的寬度，不超過其原始大小

Question

我開始在 CodePen.io 上構建一個致敬頁面，遵循用戶故事並在 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的鏈接，看看它並幫助我解決這個挑戰。

Answer 1

我用這個：

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

Answer 2

我用它來使圖像居中並使其相對於父對象的寬度。

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

您也可以使用width: 100%; 使圖像更大，使其位於頁面的中心，但那樣您只會欺騙程序，這是不公平的。

Answer 3

您是否嘗試過從您的 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>

Answer 4

我向img元素添加了margin-left (auto) 、 margin-right (auto)和display (block) ，它對我有用。 終於拿到了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;**
}

謝謝你的建議。

Answer 5

命令

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

通常就足夠了。 但是 codepin 測試代碼的方式是同時搜索寬度和最大寬度

但是，人們說您應該將 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

Answer 6

我一直在做同樣的項目。

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

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

為什么是 90%？ 至於挑戰，我們不希望圖像占據容器的整個寬度。 添加這些屬性后，無論我如何調整頁面大小，圖像都不會超出容器，它會響應

Answer 7

這就是我所做的

 #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;**
}

Answer 8

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

Answer 9

請嘗試此代碼供您參考

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

Answer 10

這是解決方案：

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

Answer 11

#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;
}

Answer 12

試試這個我的東西這對你有幫助....

@media (min-width:500px){/ Class 名稱/{/屬性/}} @media (max-width:499px){/ Class 名稱/{/屬性/}}

Answer 13

此鏈接包含您應該需要的內容： 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 -->

}