gpt4 book ai didi

css - 水平滚动页面上 100% 宽度的图像

转载 作者:行者123 更新时间:2023-11-28 09:39:43 25 4
gpt4 key购买 nike

我正在尝试为照片故事制作一个页面 - 它旨在水平滚动,但我还希望图像缩放到 100% 高度和自动宽度(因此不裁剪)。水平滚动和 100% 高度/自动宽度没有问题。但我无法让图像正确间隔 - 它们一直重叠。请参阅:http://i.imgur.com/nzOon.jpg

这可能吗?多年来一直致力于此,但我的想法已经用完了。

谢谢!

JS:

<script type="text/javascript" charset="utf-8">
$(function(){
$(".image").wrap("<td>");
});
</script>

CSS:

.image {
position:absolute;
width:auto;
height:100%;
}

HTML:

<div id="page-wrap">
<div class="image">
<img src="images/Betty-001.jpg" id="image-contents" />
</div>

<div class="image" style="margin-left:75%;">
<img src="images/Betty-001.jpg" id="image-contents" />
</div>
</div>

最佳答案

如果您允许,HTML 将为您完成滚动和图像宽度。

演示:http://jsfiddle.net/ThinkingStiff/sVa7S/

HTML:

<div id="scroll">
<img src="http://thinkingstiff.com/images/priorities.png" /><!--
--><img src="http://thinkingstiff.com/images/priorities.png" />
</div>

CSS:

#scroll {
height: 100%;
overflow-x: scroll;
white-space: nowrap;
width: 100%;
}

#scroll img {
height: 100%;
vertical-align: top;
}

关于css - 水平滚动页面上 100% 宽度的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10964170/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com