CSS：圖像無法正確縮放

Question

我是CSS的新手，我正在嘗試將2張圖片（在同一類中）縮放到相同的百分比：高度：x％和寬度：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;
}