картинка обрезается при уменьшении

Question

Нужно чтобы картинка при уменьшении не обрезалась

body {
  background-image: url(https://haruproject.space/assets/images/bg.gif);
}
a {
  list-style-type: none;
  text-decoration: none;
}
li {
  font-size: 30px;
  color: #080;
}
li:hover {
  color: #aa5;
}
img{
  width: 100%;
  height: 100%;
}
main {
  display: block;
  position: relative;
  width: 900px;
  height: 600px;
  margin: 0 auto;
}
p, h1 {
  color: #fff;
}
.menu {
  display: flex;
  justify-content: center;
  gap: 40px;
}
.images {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0px;
}
.bigImage {
  display:block;
  position: relative;
  width: 100%;
  background-image: url(https://memepedia.ru/wp-content/uploads/2022/10/mudroe-tainstvennoe-derevo-mem-9-1.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center;
}
.smallImages {
  display: block;
  position: relative;
  width: 300px;
}
.smallImages > div {
  display: block;
  position: relative;
  height: 200px;
  background-image: url(https://memepedia.ru/wp-content/uploads/2022/10/mudroe-tainstvennoe-derevo-mem-9-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.text {
  display: block;
  position: relative;
  background-color:rgb(139, 120, 120);
  width: 200px;
  padding-left: 30px;
}
.header {
  display: block;
  background-color: wheat;
  width: 100%;
  z-index: 2;
  background-size: cover;
  position:fixed;
  top: 0;
  left: 0;
}
.header_text div {
  background-image: url(https://memepedia.ru/wp-content/uploads/2022/10/mudroe-tainstvennoe-derevo-mem-9-1.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  height: 1000px;
}
.header_text  {
display: flex;
justify-content: center;
gap: 40px;
}
.margin-top {
  margin-top: 100px;
}
.textImg {
  background-color: rgb(60, 30, 94);
  text-align: center;
}
.list > div {
  background-image: url(https://memepedia.ru/wp-content/uploads/2022/10/mudroe-tainstvennoe-derevo-mem-9-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 200px;
  display: flex;
  position: relative;
  margin-top: 20px;

}
.list {
  display: block;
  position: absolute;
  width: 250px;
}
.content {
  display: flex;
  margin-top: 50px;
}
.header_list {
  display: flex;
  gap: 10px;
}
.header_list button { 
  width: 140px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="tojeotlichniistyli.css">
    </head>
    <body>
        <header>
            <div class="header">
                <div class="header_text">
                <div class="logo"></div>
                <a><button><li>Поиск</li></button></a>
                <a href="#"><li>Пункт31</li></a>
                <a href="#"><li>Пункт45</li></a>
                <a href="#"><li>Пункт58</li></a>
                </div>
            </div>
     <div class="margin-top">
            <ul class="menu">
                <a href="#"><li>Пункт1</li></a>
                <a href="#"><li>Пункт2</li></a>
                <a href="#"><li>Пункт3</li></a>
                <a href="#"><li>Пункт4</li></a>
                <a href="#"><li>Пункт5</li></a>
            </ul>
         </header>
         <main>
            <section class="images">
                <div class="bigImage"></div>
                <div class="textImg"><h3>Пенопласт</h3>
                <div class="smallImages">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            </section>
            <div class="content">
            <section class="text">
                <div>
                    <h1>Header</h1>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                </div>
                <div>
                    <h1>Header</h1>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                </div>
                <div>
                    <h1>Header</h1>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                </div>
            </section>
            <div class="content_small">
                <div class="header_list">
                    <button><a>Каталог</a></button>
                    <button><a>Новове</a></button>
                    <button><a>Популярное</a></button>
                    <button><a>Ожидаемое</a></button>
                </div>
                <div class="image_list">
                <div class="list">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
             </div>
            </div>
         </div>
        </main>
     </div>
    </body>
</html>

БЛОГ НА HUSL

картинка обрезается при уменьшении

Ответы (0 шт):