图像每4秒更改一次为新图像。
问题是，在不改变图像的情况下，图像必须与网页的宽度相同，因此可以放大或缩小图像，但如果图像的宽度为3000px，例如，体宽将变为3000px。我更希望如果你缩小屏幕宽度，照片保持不变，但在图像底部没有滚动条。在不改变照片宽度的情况下，它看起来不再美丽。
有没有办法让图像中超出设备视口的部分在Mobile上不可见
例如，裁剪高度为1000px和宽度为600px的图像，对于高度为1000px和宽度为1200px的平板电脑裁剪，以及在全屏计算机上，是否保留高1000px和宽2000px的图像？
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" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<section id="pageA">
<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;
object fit属性定义元素如何响应其内容框的高度和宽度。参考文献https://css-tricks.com/almanac/properties/o/object-fit/
容器img{
position:absolute;
width: 100%;
height: 1000px;
object-fit: cover;
left:0;
}
我想您本想制作div"class"="container"，但您却将ID设置为它。
然后根据BootStrap文档，您应该将类"img fluid"添加到img中，以使您的图像适合父框架，并相应地缩放。
<div class="container">
<img src="images/mountain.png" class="img-fluid" alt="Responsive image">
</div>