Почему картинка выходит за рамки разметки

Question

Почему картинка выходит за рамки разметки

ivan bugaev Ученик (104), на голосовании 5 месяцев назад

html код:
<!DOCTYPE>
<html>
<head>
<title>Purrfect Breeds</title>
<meta charset="CP-1251" />
<link rel="stylesheet" href="style.css">
</head>
<body>

<span class="text-black">
<p>
Добро пожаловать в мир кошачьих прекрасных пород!
Здесь мы расскажем вам о семи самых популярных и востребованных породах кошек, которые очаровывают своим характером, умом и изящной внешностью.
Давайте начнем!
</p>
</span>

<div id="Maine_Coon3">
<h1>Мейн-кун</h1>
<img src="Maine_Coon.jpg" alt="Maine Coon" class="Maine_Coon2" align="left">
<span id="Maine_Coon" class="text-black">
<p>
Мейн-кун – это величественная порода кошек с мускулистым телосложением и крупными размерами. Их густая, пушистая шерсть и характерный «румяный» окрас делают их невероятно привлекательными. Эти коты обладают крупными головами с выраженными щеками и умеренно длинными ушами, которые дополняют их внешний вид.
Ум и умственная сообразительность мейн-кунов впечатляют. Они очень умны, сообразительны и легко обучаются различным трюкам и командам. Более того, мейн-кун очень коммуникабельны и легко находят общий язык с членами своей семьи.
Характер мейн-кунов их делает идеальными домашними питомцами. Они обычно дружелюбны, ласковы и преданы своим хозяевам. Мейн-куны часто описывают как нежные гиганты: они могут быть невероятно ласковыми и нежными, особенно с детьми, которых защищают и заботятся о них. В то же время они остаются игривыми и любознательными даже в зрелом возрасте, что делает их прекрасными компаньонами для игр и развлечений.
Мейн-куны – это прекрасные кошки для семей с детьми и других животных. Их доброжелательный и уравновешенный характер делает их отличным выбором для тех, кто ищет верного и преданного друга на долгие годы.
</p>
</span>
</div>

</body>
</html>

CSS код:
span {
font-size: 22px;
}

body {
line-height: 1.4;
background-color: #A0522D;
}

.text-black {
color: #000000;
}

img {

}

.Maine_Coon2 {
width: 500px;
height: 600px;
object-fit: cover;
background-size: contain;
}

div#Maine_Coon3 {
background-color: #8B4513;
border: 3px solid #fff;
border-radius: 30px;
}

h1 {
text-align: center;
}

Я хочу сделать так чтобы картинка не выходила за рамки

Answer 1

У img нету background и тем более background-size...
Что бы img принимал любые размеры допишите в css: display block..
Обнулите все отступы, наружние и внутренние..
Уберите у тела документа line-height

Answer 2

   
img.Maine_Coon2 {
    width: 500px;  
    height: 600px;
}

div#Maine_Coon3 {  
    background-color: #8B4513; 
    border: 3px solid #fff; 
    border-radius: 30px; 
    overflow: auto;
}