html - 按像素大小缩放图像

Question

我有一个包含文本、图像和更多文本的框，每个文本都是动态加载的。

问题是图像大小不一，要么溢出可用空间，要么没有填满。

例如，我有这个工作案例 ( JSFiddle ):

.tBox {
  position: relative;
  width: auto;
  max-width: 100%;
  min-height: 400px;
  max-height: 500px;
  background-color: #222831;
  border-radius: 5px;
  margin: 40px auto;
  align-content: center;
  color: #eeeeee;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
  font-family: 'Lato', sans-serif;
}

.imgText {
  margin: 0 auto;
  position: relative;
  margin-left: 2em;
  margin-Top: 2em;
  font-size: 1.25em;
}

.tBoxNoBorder {
  height: 300px;
}

.graphic {
  justify-Content: center;
  align-Content: center;
  text-Align: center;
  left: 50%;
  max-width: 30vw;
}

.imgGraphic {
  width: 50%;
  margin-Top: 3%;
}

.imgConclusion {
  float: right;
  margin-Right: 1em;
  margin-bottom: 1em;
  font-size: 1.25em;
}

.legend {
  padding: 0.2em 0.8em;
  background: #d65a31;
  border-radius: 25px;
  float: left;
  margin-top: -20px;
  margin-left: 20px;
  width: auto;
  min-width: 200px;
  font-size: 3vmax 2vmin;
  font-family: 'Lato', sans-serif;
}

.imgDiv {
  justify-Content: center;
  align-Content: center;
  text-Align: center;
  left: 50%;
}

.img {
  width: 30%;
  margin-Top: 3%;
  left: 50%;
}

<div>
  <fieldset class="tBox">
    <legend class="legend">The best QBDs have:</legend>
    <div class="imgText">Almost No Thinking: You should not need to be subjective. Claim each item as 0/100 (it’s either completed or it isn’t)

      Proportionate Items: To give the best output, the individual elements should be of similar size

      Simple &amp; Manageable: It should be easy to use and not require significantly more work

      Complement The Schedule: The QBD should not be used for detailed planning, rolling wave or a schedule. It should be a checklist of criteria for achieving a task </div>
    <div class="imgDiv"><img class="imgGraphic" src="https://drive.google.com/uc?export=view&amp;id=1v4K09NaRaMUDvlXKazMtdEF6cBPKc2eI" alt=""></div>
    <div class="imgConclusion">Clear guidelines!</div>
  </fieldset>
</div>

但是我也有这个人(JSFiddle):

.tBox {
  position: relative;
  width: auto;
  max-width: 100%;
  min-height: 400px;
  max-height: 500px;
  background-color: #222831;
  border-radius: 5px;
  margin: 40px auto;
  align-content: center;
  color: #eeeeee;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
  font-family: 'Lato', sans-serif;
}

.imgText {
  margin: 0 auto;
  position: relative;
  margin-left: 2em;
  margin-Top: 2em;
  font-size: 1.25em;
}

.tBoxNoBorder {
  height: 300px;
}

.graphic {
  justify-Content: center;
  align-Content: center;
  text-Align: center;
  left: 50%;
  max-width: 30vw;
}

.imgGraphic {
  width: 50%;
  margin-Top: 3%;
}

.imgConclusion {
  float: right;
  margin-Right: 1em;
  margin-bottom: 1em;
  font-size: 1.25em;
}

.legend {
  padding: 0.2em 0.8em;
  background: #d65a31;
  border-radius: 25px;
  float: left;
  margin-top: -20px;
  margin-left: 20px;
  width: auto;
  min-width: 200px;
  font-size: 3vmax 2vmin;
  font-family: 'Lato', sans-serif;
}

.imgDiv {
  justify-Content: center;
  align-Content: center;
  text-Align: center;
  left: 50%;
}

.img {
  width: 30%;
  margin-Top: 3%;
  left: 50%;
}

<div id="compGraphic">
  <fieldset class="tBox">
    <legend class="legend">So...</legend>
    <div class="imgText">For Karen, that means her performance looks like this...</div>
    <div class="imgDiv"><img class="imgGraphic" src="https://drive.google.com/uc?export=view&amp;id=13NKquqxlGJc9snU54sytPWbenwr7TRUU" alt=""></div>
    <div class="imgConclusion">...Yikes!</div>
  </fieldset>
</div>

请注意在第二个示例中，图像没有填充到底部。请注意，tBox 将根据屏幕大小调整大小，但应始终大于其内容。

我试过使用 vw/vh 和 position: absolute 设置最大高度/宽度，但无济于事——图像似乎永远不会居中或永远不会完全合适。

我考虑过的最好的办法是调整 .imgGraphic 上的 width，但我不确定如何根据 img 像素大小动态地执行此操作.也显得不雅观。我错过了什么？

Answer 1

好的，首先更改以下 CSS 属性:

justify-Content to justify-content
text-Align to text-align
margin-Top to margin-top
...

这些属性通常是小写字母。

建议的 CSS

.tBox {
    position: relative;
    width: auto;
    max-width: 100%;
    min-height: 400px;
    max-height: 500px;
    background-color: #222831;
    border-radius: 5px;
    margin: 40px auto;
    align-content: center;
    color: #eeeeee;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
    font-family: 'Lato', sans-serif;
  }

  .imgText {
    margin: 0 auto;
    position: relative;
    margin-left: 2em;
    margin-top: 2em;
    font-size: 1.25em;
  }

  .tBoxNoBorder {
    height: 300px;
  }

  .imgGraphic{
    max-height: 250px;
    width: auto;
  }

  .imgConclusion {
    float: right;
    margin-right: 1em;
    margin-bottom: 1em;
    font-size: 1.25em;
  }

  .legend {
    padding: 0.2em 0.8em;
    background-color: #d65a31;
    border-radius: 25px;
    float: left;
    margin-top: -20px;
    margin-left: 20px;
    width: auto;
    min-width: 200px;
    font-size: 3vmax 2vmin;
    font-family: 'Lato', sans-serif;
  }

  .imgDiv {
    text-align: center;
    margin: 3% auto;
  }

我将 max-height 设置为 250px 的原因是因为您指定 .tBox 大小不会改变。

.imgDiv 是图像容器，因此它用于使图像居中。