为什么我的图片不能用 CSS flexbox 调整大小？答案

【问题标题】：Why aren't my images resizing with CSS flexbox?为什么我的图片不能用 CSS flexbox 调整大小？
【发布时间】：2021-04-17 04:44:48
【问题描述】：

我对编码非常陌生。我尝试将 CSS flexbox 用于某些图像，但它们不会改变默认大小。有谁知道为什么？

这是我的代码 https://codepen.io/johng003/pen/gOgxKWY

<style>
#donut-gallery{display:flex;
flex-direction:row;
justify-content:space-around;
align-items:center;
flex-wrap:wrap;}

#donut1{flex:0 4 150px}
#donut2{flex:1 1 150px}
#donut3{flex:1 4 150px}
#donut4{flex:1 4 150px}
#donut5{flex:1 1 150px}
#donut6{flex:1 1 150px}
</style>

<div>  
     <img id="donut1" src="https://i.imgur.com/oXPlX3S.jpg" alt="A donut with galaxy mirror glaze" class="donutimage1">
      <img id="donut2" src="https://i.imgur.com/HOzPDAg.jpg" alt="A donut with cookies and cream filling"class="donutimage2">
      <img id="donut3" src="https://i.imgur.com/ER3hBG4.jpg" alt="An oversized pink sprinkles donut"class="donutimage3">
      <img id="donut4" src="https://i.imgur.com/QfhD5o4.jpg" alt="A tower of colourful donuts"class="donutimage4">
     <img id="donut5" src="https://i.imgur.com/yueQzkr.jpg" alt="A dozen donuts with sprinkles"class="donutimage5">
     <img id="donut6" src="https://i.imgur.com/guK5rGP.jpg" alt="Halloween themed dounuts"class="donutimage6"> 
     </div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

干得漂亮

对于#donuts，您需要一个特定的或相对的宽度。下面的代码可以帮助确保它们相等。 calc 方法有助于在 CSS 中进行相对维度划分。

#donut1,#donut2, #donut3,#donut4, #donut5, #donut6{width: calc(100% / 6)}

查看媒体查询和更具响应性的图片 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries https://www.udacity.com/course/responsive-images--ud882

【讨论】：

【解决方案2】：

您忘记在 HTML 中为 donut-gallery 设置 ID。

<style>
#donut-gallery{display:flex;
flex-direction:row;
justify-content:space-around;
align-items:center;
flex-wrap:wrap;}

#donut1{flex:0 4 150px}
#donut2{flex:1 1 150px}
#donut3{flex:1 4 150px}
#donut4{flex:1 4 150px}
#donut5{flex:1 1 150px}
#donut6{flex:1 1 150px}
</style>

<div id="donut-gallery">  
     <img id="donut1" src="https://i.imgur.com/oXPlX3S.jpg" alt="A donut with galaxy mirror glaze" class="donutimage1">
      <img id="donut2" src="https://i.imgur.com/HOzPDAg.jpg" alt="A donut with cookies and cream filling"class="donutimage2">
      <img id="donut3" src="https://i.imgur.com/ER3hBG4.jpg" alt="An oversized pink sprinkles donut"class="donutimage3">
      <img id="donut4" src="https://i.imgur.com/QfhD5o4.jpg" alt="A tower of colourful donuts"class="donutimage4">
     <img id="donut5" src="https://i.imgur.com/yueQzkr.jpg" alt="A dozen donuts with sprinkles"class="donutimage5">
     <img id="donut6" src="https://i.imgur.com/guK5rGP.jpg" alt="Halloween themed dounuts"class="donutimage6"> 
     </div>

【讨论】：