我有一个正在开发的网站,并试图让图像在顶部溢出并在底部对齐。
现在 DIV 是 500PX 高,当图像大于它时,它的溢出隐藏在底部。问题是它使图像看起来很奇怪。我需要它来拉伸图像,因为我正在使网站响应,我知道的图像变得模糊,但这些只是临时图像。
我的问题是,有没有办法让图像的底部对齐并固定到 DIV 的底部,然后当它被拉伸得更大时,它会像负面一样在页面顶部溢出?
我有一个正在开发的网站,并试图让图像在顶部溢出并在底部对齐。
现在 DIV 是 500PX 高,当图像大于它时,它的溢出隐藏在底部。问题是它使图像看起来很奇怪。我需要它来拉伸图像,因为我正在使网站响应,我知道的图像变得模糊,但这些只是临时图像。
我的问题是,有没有办法让图像的底部对齐并固定到 DIV 的底部,然后当它被拉伸得更大时,它会像负面一样在页面顶部溢出?
我认为您正在尝试显示图像的底部而不是顶部?如果是这种情况,请在选择器上将#myGallery img
图像的位置更改为底部而不是顶部。
#myGallery img {
display:none;
position:absolute;
bottom: 0; // change this from top to bottom
width: 100%;
left:0;
}
我建议从您的 DIV 中删除高度,并从您的图像中删除 position: absolute,因为无论大小如何,您都需要图像的高度来定义 DIV 的高度。
在响应式幻灯片上,我开始使用以下 CSS:
.slide {
width: 100%;
float: left;
margin-right: -100%;
}
这允许您将它们堆叠在一起,就像绝对定位一样,但 DIV 会响应幻灯片的高度。
不过,您的底部也有白色渐变,我认为这是您提出问题的部分原因 - 您希望在较小的视图上使用渐变。
为此, img#fadeimage 应该有position: absolute; bottom: 0; height: 100%
,但您可能还需要构建图像,以便顶部有更多空白空间。