时间戳

首页 > 解决方案 > 图像不断将正文宽度延伸到网页的视口之外

html - 图像不断将正文宽度延伸到网页的视口之外

问题描述

图像每 4 秒更改一次新图像。

问题是图片必须和网页的宽度一样，不改变图片，所以放大或缩小，但是发生的情况是图片的宽度是3000px，所以我的body宽度变成了3000px ，但我更喜欢这样，如果您缩小屏幕宽度以使照片保持不变，但图像底部没有滚动条。没有照片改变他不再漂亮的宽度。

所以无论如何你如何使超出设备视口的部分只是使图像的那部分不可见所以在移动设备上你看到例如高度 1000 像素和宽度 600 像素和平板电脑高度 1000 像素和宽度 1200 像素和全屏计算机高度高度为 1000 像素、宽度为 3000 像素的图像的 1000 像素和 2000 像素？

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;

标签： htmlcss

解决方案

我认为你的意思是让你的 div "class" = "container" 但你已经将 ID 设置为它。

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

<div class="container">

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

</div>

推荐阅读