Question

基本上，我有当前正在使用的此幻灯片的框架，但是当我将图片放到其上时，图片被放大了，但是我希望整个图片都适合盒子。如果您能帮助我做到这一点，那就太好了。

截屏： screenshot

您看到的图片被放大了，其中有些丢失了

html

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div class='slider'>
  <div class='slide1'></div>
  <div class='slide2'></div>
  <div class='slide3'></div>
  <div class='slide4'></div>
  <div class='slide5'></div>
  <div class='slide6'></div>

</div>
</body>
</html>

css

.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}
}

您可能需要的其他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;

}

Answer 1

由于使用了background-size: cover;，因此图像被裁剪，如果您使用background-size: contain;，则图像不会被裁剪，如果您不介意更改，还可以使用100%之类的特定尺寸宽高比。

https://developer.mozilla.org/es/docs/Web/CSS/background-size

Answer 2

尝试替换背景尺寸：封面；
与
适合对象：填充；
如果您不在乎打破宽高比

我如何使照片固定在盒子里

2 个答案: