容器img {

Question

图像每4秒更改为新图像。

问题是图像必须与网页的宽度相同，而无需更改图像，因此请放大或缩小，但是发生的情况是图像的宽度为3000px，例如，我的身体width变为3000px，但是我更喜欢如果您将屏幕宽度减小一些，以使照片保持不变，但是图像底部没有滚动条。而照片没有改变他不再看起来漂亮的宽度。

因此无论如何，您如何才能使超出设备视口的部分变得不可见，只需在移动设备上看到该部分，例如高度1000像素和宽度600像素以及平板电脑高度1000像素和宽度1200像素以及全屏计算机高度1000像素和宽度2000像素，高度分别为1000像素和3000像素，宽度为3000像素？

html

 <html>

<head>
<title>Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, 
 maximum-scale=1" />
<link href="style.css" type="text/css" rel="stylesheet">
<link href="image.css" type="text/css" rel="stylesheet">
<link href="modal.css" type="text/css" rel="stylesheet">
<link rel="stylesheet"

href =“ https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”完整性=“ sha384- MCw98 / SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin =“ anonymous

<div id="container" class="container">
    <img class="img-fluid" src="images/mountain.png">
    <img class="img-fluid" src="images/mountain2.png">
    <img class="img-fluid" src="images/mountain3.png">
    <img class="img-fluid" src="images/mountain4.png">

</div>
</section>
</body>

Css

  body {
width: auto;
}

#container {
position:relative;
width: 100%;
}

#container img {
position:absolute;
background-size: cover;
background-position: center;
left:0;
}

@-webkit-keyframes imgFade {
0% {
    opacity:1;
}
17% {
    opacity:1;
}
25% {
    opacity:0;
}
92% {
    opacity:0;
}
100% {
    opacity:1;
}
}

@-moz-keyframes imgFade {
0% {
    opacity:1;
}
17% {
    opacity:1;
}
25% {
    opacity:0;
}
92% {
    opacity:0;
}
100% {
    opacity:1;
}
}

    @-o-keyframes imgFade {
0% {
    opacity:1;
}
17% {
    opacity:1;
}
25% {
    opacity:0;
}
92% {
    opacity:0;
}
100% {
    opacity:1;
}
}

@keyframes imgFade {
0% {
    opacity:1;
}
17% {
    opacity:1;
}
25% {
    opacity:0;
}
92% {
    opacity:0;
}
100% {
    opacity:1;
}
 }

 #container img {
-webkit-animation-name: imgFade;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;

-moz-animation-name: imgFade;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;

-o-animation-name: imgFade;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;

animation-name: imgFade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
 }
 #container img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
 }
#container img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
 }
 #container img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
  }
 #container img:nth-of-type(4) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;

Answer 1

我认为您打算将div设置为“ class” =“ container”，但您已为其设置了ID。

然后根据BootStrap documentation，您应该在img中添加“ img-fluid”类，以使图像适合父框架，并相应地缩放。

<div class="container">

<img src="images/mountain.png" class="img-fluid" alt="Responsive image">

</div>

Answer 2

object-fit属性定义元素如何响应其内容框的高度和宽度。参考文献https://css-tricks.com/almanac/properties/o/object-fit/

容器img {

winscp.com /ini=nul /command ^
    "open ftp://username:password@ftp.example.com/" ^
    "get C:\Users\nohupt\Documents\* /users/nohupt/Documents/" ^
    "exit"

}

图片使正文宽度超出了网页的视口

2 个答案:

容器img {