Как установить размер изображения, чтобы он соответствовал размерам CSS и HTML и выглядел бы одинаково

Question

Я пытаюсь исправить само изображение до размера области, но когда я использую size: 25%;, оно недействительно.

<style>
.imageContent {
height: auto;
min-height: 300px;
background-color: #fff;
width: 100%;
}
.imageContent img {
size: 25%;
grid-column: 2;
}
</style>
<div class="imageContent">
<img src="computerIMGedit.jpg" />
</div>

и тогда ничего не происходит, изображение остается того же размера и вообще ничего не меняется! Я использую возвышенное, и, согласно возвышенному, «%» недействителен в этом контексте, потому что, когда что-то действительно, оно изменит цвет текста на светло-голубой et c. Но ничего не происходит с "%"

Answer 1

Вы можете сделать что-то вроде этого, он подойдет для всех размеров:

Используйте display: block;, чтобы поместиться в div.

.imageContent {
  height: auto;
  min-height: 300px;
  background-color: #fff;
  border: 3px solid red;
  display: inline-block;
}

.imageContent img {
  width: 100%;
  display: block;
}

<style>

</style>
<div class="imageContent">
  <img src="http://placekitten.com/301/301" />
</div>

Answer 2

Дескриптор правила size CSS, используемый с правилом @page at-rule, определяет размер и ориентацию блока, который используется для представления страницы.

Как я вижу, вы не используют правило @page, а при использовании изображения следует использовать свойство ширины: -

.imageContent img {
  width : 25%;
  grid-column: 2;
}