当浏览器调整大尺寸图像时移动

所以在我的网页上，我有一些大图像，可以在您向下滚动时看到。它们在我的普通尺寸的浏览器上显示效果很好，但是当我缩小浏览器的尺寸时，图像之间的空白区域增加得相当剧烈。我希望两幅图像之间有空白，但我不希望它们之间的差距发生变化和放大。在浏览器调整大小时，关于顶部的关于部分的情况也是如此，关于部分的白色空间增加并且它与下面的图像之间的差距扩大。当浏览器调整大尺寸图像时移动

我试图让我的网站响应（因此％），但它现在工作不太好，所以我可能坚持做一个正常的网站。不过，任何有用的回应将非常感谢！

html { 
 
\t font-family: 'Lato', sans-serif; 
 
\t overflow: scroll; 
 
} 
 

 
.about { 
 
\t width: 100%; 
 
\t height: 50%; 
 
\t background-color: #fffff; 
 
\t position: absolute; 
 
} 
 

 
.about h1 { 
 
\t text-align: center; 
 
\t font-weight: 900; 
 
\t font-size: 50px; 
 
\t color: #00b4ff; 
 
} 
 
.about p { 
 
\t text-align: center; 
 
\t margin-left: 30px; 
 
\t margin-right: 30px; 
 
} 
 

 
.books { 
 
\t max-width: 100%; 
 
\t height: auto; 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t top: 990px; 
 
\t z-index: -2; 
 
\t background-position: center; 
 
} 
 

 
.business { 
 
\t width: 100%; 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t top: 1800px; 
 
\t z-index: -2; 
 
}

<!DOCTYPE html> 
 
<head> 
 
<link rel="stylesheet" href="style1.css"/> 
 
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic' rel='stylesheet' type='text/css'/> 
 
</head> 
 

 
<div class="about"> \t 
 
\t \t \t <h1>ABOUT</h1> 
 
\t \t \t <p> 
 
\t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
 
\t \t \t \t labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
 
\t \t \t \t nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
 
\t \t \t \t esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
 
\t \t \t \t in culpa qui officia deserunt mollit anim id est laborum <br><br> 
 
\t \t \t \t ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
 
\t \t \t \t totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta 
 
\t \t \t \t sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur 
 
\t \t \t \t magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
 
\t \t \t \t consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
 
\t \t \t </p> 
 
\t \t </div> 
 
\t \t <img class="books" src="http://delightedimages.com/wp-content/uploads/2015/07/Delighted-Images_Nicole-and-Ryan_Joshua-Tree_Engagement_82_0406.jpg" alt="books"/> 
 
\t \t 
 
\t \t <img class="business" src="http://nikonrumors.com/wp-content/uploads/2015/04/Nikon-1-J5-sample-images-4.jpg" alt="business"/> 
 
\t </div><!-- /container -->

来源

2015-08-16 Shuuya

不要使用绝对位置来将您的图像。您可以使用标签为图片构建自己的柔性容器，也可以使用margin-top和margin-bottom标签来定义元素之间的空白区域，并根据您的需要使用浏览器的正常布局。以下将设置顶部图像与您的设计中显示的完全相同，但通过使用边距设置两个图像之间的间距，动态更改图像大小以匹配窗口宽度。如果您想要更多空白或更少，只需更改第二张图像的边距编号。如果您希望距离与屏幕大小而不是像素大小有关，请改用百分比。

.books { 
    max-width: 100%; 
    height: auto; 
    position: relative; 
    left: 0px; 
    margin-top: 990px; 
    z-index: -2; 
    background-position: center; 
} 

.business { 
    width: 100%; 
    position: relative; 
    left: 0px; 
    margin-top:100px; 
    z-index: -2; 
}

这是一个工作小提琴。 https://jsfiddle.net/pjgbp7jo/

来源

2015-08-16 04:40:29 Chris

非常感谢！小查询，我将如何删除图像左侧和右侧的白色空间？ – Shuuya

你应该可以通过定义margin-left来做到这一点：0％;保证金：0％; 标准是，如果权利未定义，它会收到左侧的值，但我曾遇到过无法正常工作的情况，所以我通常在需要时定义两者。 – Chris

你的图片有那些巨大的空白，因为你有他们绝对定位。如果你想让你的图像显示在彼此的顶部，让他们display: block;，而不是绝对定位它们。或者，如果您将图片固定为宽度，则不会调整大小，也不会有这些空格。

来源

2015-08-16 03:58:39 khuderm

我在页面顶部有一个幻灯片放映（使用skippr），所以当我将图像设置为'display：block'时，它们全都隐藏在幻灯片下，所以我不能再在页面上看到它们。我希望他们在幻灯片放映后一个接一个地显示，而不是在下面。 – Shuuya

用''div'包装滑块'clear：both;'css。 – khuderm

为什么你没有使用flexbox？！

.container {display: flex;flex-direction:column;} 
    .about { 
     background-color: #fffff; 
     height: 50%; 
    } 

    .about h1 { 
     text-align: center; 
     font-weight: 900; 
     font-size: 50px; 
     color: #00b4ff; 
    } 
    .about p { 
     text-align: center; 
     margin-left: 30px; 
     margin-right: 30px; 
    } 

    .books { 
     height: auto; 
     z-index: -2; 
     background-position: center; 
    } 

    .business { 
     z-index: -2; 
    }

好运

来源

2015-08-16 04:16:37

谢谢你这是伟大的！我怎样才能去除图像左右两侧的空白区域？我不想要那里的空白哈哈 – Shuuya

是的，对不起，我很忙！在容器的css代码中使用'align-items：center' –

当浏览器调整大尺寸图像时移动

回答

相关问题