Html 我如何让照片固定盒子

基本上，我有一个框架，我目前正在使用的幻灯片，但当我把图片放在它，图片放大，但我希望整个图片适合的框。如果你能帮我做这件事，那就太好了

截图：

正如你所看到的，这张照片放大了，有些地方不见了

html

你可能需要一些其他的css

* {
    box-sizing: border-box;
}
body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    margin: 0;
    min-height: 100vh;

    /*Background Image */

    background-image: url(../img/Background-Blurred.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;

}

---

由于使用了

背景尺寸：cover，如果使用
背景大小：contain它不会被裁剪，如果不介意更改纵横比，还可以使用特定的尺寸，如
100%

尝试替换背景尺寸：封面

与

对象匹配：填充

如果你不在乎打破纵横比

.slider {
  max-width: 90%;
  height: 450px;
  margin: 20px auto;
  position: relative;

}
.slide1,.slide2,.slide3,.slide4,.slide5.slide6,.slide7,.slide8,.slide9,.slide10 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
}



/*default is not 20s its usually 8 IM TRYING TO CHANGE THE LENGTH OF TIME IN WHICH IT STAYS ON THE SCREEN */
.slide1 {
  background: url(../img/Slideshow/img1.jpg)no-repeat center;
      background-size: cover;
    animation:fade 20s infinite;
-webkit-animation:fade 20s infinite;

} 
.slide2 {
  background: url(../img/Slideshow/img2.jpg)no-repeat center;
      background-size: cover;
    animation:fade2 20s infinite;
-webkit-animation:fade2 20s infinite;
}
.slide3 {
    background: url(../img/Slideshow/img3.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 20s infinite;
-webkit-animation:fade3 20s infinite;
}
.slide4 {
    background: url(../img/Slideshow/img4.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 20s infinite;
-webkit-animation:fade3 20s infinite;
}
.slide5 {
    background: url(../img/Slideshow/img5.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 20s infinite;
-webkit-animation:fade3 20s infinite;
}
.slide6 {
    background: url(../img/Slideshow/img6.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 20s infinite;
-webkit-animation:fade3 20s infinite;
}
.slide7 {
    background: url(../img/Slideshow/img7.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 20s infinite;
-webkit-animation:fade3 20s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

* {
    box-sizing: border-box;
}
body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    margin: 0;
    min-height: 100vh;

    /*Background Image */

    background-image: url(../img/Background-Blurred.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;

}