CSS：图像缩放不正确

Question

我是CSS的新手，我正在尝试将同一类中的2张图片缩放到相同的perecentage：height：x％和width：y％，但是它们的大小并不相同。如果重要，我也没有在HTML文件中设置大小。这是我得到的：

.BlogBoxes { 
    font-size: 20px;
    text-align: justify;
    border-style: solid;
    border-width: 3px;
    width: 70%;
    height: 30%;
    margin: 20px 1000px 20px 10px;
    padding: 10px 10px 50px 30px; 
    background-color: #FFCEB7;
}

.BlogBoxes img {
    float: right;
    width: 25%;
    height: 80%;
    padding-left: 10px;
    padding-top: 70px;
}

这是截图，如果有帮助的话

Answer 1

您需要将之后的宽度应用于图像的父元素，然后将图像设置为最大宽度为100％。

因此，在您的情况下，您希望图像占据'.BlogBoxes'的25％，因此我们将在'.img-container'中创建一个新的div，然后将img放在其中。

.BlogBoxes div.img-container {
  float: right;
  width: 25%;
  /*height: 80%; // forget height this is not necessary */
  padding-left: 10px;
  padding-top: 70px;
}
.BlogBoxes div.img-container img {
  max-width: 100%; 
  height: auto;
  display: block;
}