CSS: Изображения не масштабируются правильно

Question

Я новичок в CSS, и я пытаюсь масштабировать 2 изображения, которые находятся в одном классе, с одним и тем же периодом: 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%.

Итак, в вашем случае вы хотите, чтобы изображение занимало 25% «.BlogBoxes», поэтому мы создадим новый div внутри этого «.img-container», а затем разместим 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; 
}