滚动不起作用:
你有没有想过为什么?
因为这行代码:
position: fixed;
为什么这会使滚动停止?实际上它不是停止滚动,而是锁定了它的位置!当您查看滚动条时,scoll 正在工作,但图像的位置是固定的。您可以使用position: absolute
以最小化这种影响。
图片宽度为 50%:
当您50%
对图像使用宽度时,实际上是让图像具有最近的父元素的 50% 宽度和一些宽度。例如:
<div class="someclass">
<img src="link/to/file.png" alt="photo" />
</div>
.someclass {
width: 500px;
}
现在,当您使用 to 设置图像时,width: 50%;
它将填充 50% 的 div;那是它的父母。如果您没有设置任何内容,则主体将填充 50%。等等。
我发现的唯一问题是:
position: fixed
。_ 这导致了一些问题,一个是非滚动性,实际上是滚动,您可以尝试为页面提供渐变背景,当您滚动时,您会看到更改!
在您的 CSS 中进行一些更改:
#u1760_img {
height: auto;
width: 50%;
float: right;
z-index: 1;
left: 0;
position: fixed;
margin: auto;
top: 135px;
}
#u1765_img {
height: auto;
width: 50%;
float: left;
right: 0;
text-align:right;
position: fixed;
margin: auto;
z-index: 1;
top: 135px;
}
而不是这个,尝试使用这个:
img {
width: 50%; // set the width
position: absolute; // but still, its not the only way to position images
top: 135px;
}
请注意,我没有指定一些 CSS 属性,为什么?z-index
除非您有一些要重叠的元素,否则没有必要。所以你不需要这个。
其次,我没有将高度设置为自动,因为浏览器会自动为我们这样做:)
你也在做很多其他的假设,比如text-align
, float: left
, right: 0;
。试着在一开始就避开它们。
当您将图像的宽度设置为 45% 时,下一张图像将出现在第一张图像的前面,因此您不必为每个图像编写类,浏览器会自动为您调整图像!
不确定,但仍然有这个
我不确定你是否想要这个,但我仍然会写信以获取信息。
您可以使用媒体查询来创建可在移动设备上运行的动态页面,例如您网站的移动版本。您也可以尝试使用width: 50%
(实际上是)使浏览器在调整图像大小时始终适合其中的图像。
参考:
http://css-tricks.com/css-media-queries/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
在 css 中使用 % 调整图像大小
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index