html - 更改图像宽度以适应 flexbox 内的内容

Question

我正在尝试使图像适合 flexbox 容器。现在，如果图像足够大，它会占用 100% 的宽度，但这会导致其下方的按钮超出 flexbox。我希望图像调整它的宽度，以便所有 flexbox 元素都适合固定高度。我尝试将图像包装在 div 中，应用不同的样式等min-height: 0，但没有任何帮助:(

.skill-img {
   border-radius: 10px;
   display: block;
   max-width: 100%;
}
.skill-title {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   text-align: center;
}
.skill-choose {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   text-align: center;
   height: 300px;
   min-height: 0;
}
.buttons-choose {
   margin-top: 10px;
   height: 25%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 10px;
   flex: 0;
}
.button {
   height: 100%;
}  
.back-nav {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;        flex: 0;
   text-align: center;
}

<div class="skill-choose">
      <div class="back-nav">
        <h1>Yes or No</h1>
      </div>
      <div>
        <img
          class="skill-img"
               src="http://www.joshuacasper.com/contents/uploads/joshua-casper-samples-free.jpg"
        >
      </div>
      <div class="buttons-choose">
        <button>Yes</button>
        <button>No</button>
      </div>
    </div>

标签： htmlcssflexbox