如何使全尺寸图像可以像地图一样水平和垂直滚动
要使全尺寸图像可以像地图一样水平和垂直滚动，可以通过以下步骤实现：
- 使用HTML和CSS创建一个容器元素，设置其宽度和高度，以及overflow属性为"scroll"，这样可以在容器内创建一个滚动区域。
- 将图像作为容器元素的子元素，并设置其宽度和高度为图像的实际尺寸。
- 使用JavaScript监听滚动事件，并根据滚动的距离调整图像的位置，实现滚动效果。
以下是一个示例代码：
HTML:
<div id="image-container">
<img src="image.jpg" alt="Full-size Image">
</div>CSS:
#image-container {
width: 100%;
height: 100%;
overflow: scroll;
}
img {
width: 100%;
height: auto;
}JavaScript:
var container = document.getElementById("image-container");
var image = document.querySelector("#image-container img");
container.addEventListener("scroll", function() {
var scrollLeft = container.scrollLeft;
var scrollTop = container.scrollTop;
image.style.transform = "translate(" + -scrollLeft + "px, " + -scrollTop + "px)";
});这样，当用户在容器内滚动时，图像将根据滚动的距离进行相应的平移，从而实现全尺寸图像的水平和垂直滚动效果。
推荐的腾讯云相关产品：腾讯云对象存储（COS）
- 概念：腾讯云对象存储（COS）是一种高可用、高可靠、强安全性的云端存储服务，适用于存储和处理大规模非结构化数据。
- 优势：具备高可用性和可靠性，提供安全的数据存储和访问控制，支持多种数据处理功能，具备良好的性能和扩展性。
- 应用场景：适用于图片、音视频、文档等大文件的存储和分发，以及网站、移动应用等的静态资源托管。
- 产品介绍链接地址：腾讯云对象存储（COS）
请注意，以上答案仅供参考，具体实现方式可能因具体需求和技术选型而有所不同。
相关·内容
我想要显示一个图像居中窗口(水平和垂直)。如果图像太大，我想缩小到合适的尺寸(没有滚动条)。
这是一个实时的 -试着调整窗口的大小。图像缩放以适合，但不是垂直居中。
我正在尝试使用CSS table/table-cell，但这破坏了图像上的max-height设置。如果取消对table/table-cell的注释，图像将延伸到窗口底部之外。
两者都有可能吗？我发现了类似的问题，但不是这个确切的设置。
浏览 1提问于2014-09-07得票数 0
嗨，我知道如何在屏幕上获得点击的位置。我的问题是我需要得到图像点击的X和Y值。如果我的图像尺寸比设备小，它工作得很好，但当使用大图像时，它就会出错。
我使用水平和垂直滚动视图来显示大图。
使用event.getX()获取触摸监听器中的位置。
浏览 1提问于2013-03-08得票数 0
2回答
我有一个div标签，上面有表头，其余的表内容在另一个div中。我需要使位置固定时，垂直滚动条滚动，以便表头将在垂直scrolling.Upto上看到这一点这不是一个问题，因为使用div位置:固定，它将工作。但问题是，在水平滚动期间，标题不应该被修复。是否有水平和垂直滚动事件使位置固定和绝对?请帮助
浏览 5提问于2009-09-01得票数 1
我需要一些关于如何进行的建议/想法。
我计划做一个图像画廊与水平和垂直滚动。其思想是通过滚动类别图像水平和当在类别浏览通过该类别通过滚动垂直(向下)，而不单击。
约翰
浏览 0提问于2013-08-22得票数 0
我有两个div，或“面板”。一个面板不包含图像，因此它不能与有图像的面板进行正确的缩放。
这是一个发生了什么的例子。
有人能帮我使底部面板的尺寸与顶部面板一样大小，同时保持文本水平和垂直的中心位置吗？
浏览 4提问于2014-12-09得票数 0
回答已采纳
1回答
分段控制的固定水平位置
、、、
我有一个UIImageView (建筑的平面图)和UIScrollView的手势识别器，允许我水平和垂直滚动，放大/缩小。一切正常，但大楼有两层楼，所以用户可以选择在它们之间切换。我决定使用地图顶部的分段控件来提供此选项。
如果我将分段控件放到相同的UIScrollView上，它会垂直地和水平地滚动。我要问的是如何修复分段控制的水平位置，这样它将只能垂直滚动与地图。
我试图使用这段代码来测试，如果它绝对修正了分段控制的位置，但它似乎没有。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGRect frame = _f
浏览 4提问于2014-06-01得票数 0
回答已采纳
1回答
我正在开发的Android应用程序，其中包含电子书的阅读。因为我需要在图书视图中放置两个页面。如果这些页面超过屏幕尺寸，用户必须滚动和查看图书，并且必须收缩、缩放图书，用户可以平移图书以供阅读。
首先，我尝试在Relativelayout中放置两个webview。我可以通过在滚动视图和水平滚动视图中放置相对布局来实现这一点，以在水平和垂直方向上滚动。
但是在滑动页面时出现了问题，并且pinchzoom不能在滚动视图中工作；它仍然留在第一个页面本身。我不知道我错在哪里。
浏览 1提问于2012-07-20得票数 0
我使用的是，不管我把div图的尺寸设置得多大，它总是会显示一个水平和垂直滚动条。我如何才能阻止这种情况的发生。
浏览 0提问于2012-04-12得票数 3
回答已采纳
1回答
我是新的传单，我希望限制世界地图的平移水平，而不是垂直(经度，但不是纬度)，因为这张地图将显示图片时，我点击他们，我不能很好地看到图像时，我限制平移水平和垂直。这张地图本身并不是一幅画，而是一幅真实世界的地图。但是当我点击某个位置时，地图上会出现一张小图片。
我试着和maxBounds和setMaxbounds一起玩。正常的maxBounds (查看世界地图)是：
maxBounds: [[-85, -180.0],[85, 180.0]],
当我试着把纬度
[-150，-180,150,180.0]
，垂直摇摄仍然受到限制。有人能帮忙吗？谢谢。
浏览 2提问于2018-05-31得票数 0
5回答
我有一个简单的网站:固定宽度，可变高度，居中。我希望背景图像与内容的左下角对齐，如下所示：
----------------------------------------------------------
____________________________
| <- 960px -> |
| |
| |
浏览 1提问于2010-06-21得票数 1
回答已采纳
1回答
我试图在表单上显示位图，但问题是我必须(事先)调整它的大小，才能适合它。这是一个很大的地图(就像一个实际的map...geographical)，所以如果我把它做得很小，只是为了适合表单，它就无法读懂。所以，我想我唯一的选择就是加入某种滚动功能。这样，我就可以保持图像的完整大小，并将其包含在我的表单中。我只需要使用垂直滚动条和水平滚动条围绕一个指定的区域，在其中我可以导航整个地图。请记住，我确实需要在表格中的一些空间按钮，复选框等。
我四处寻找关于这个问题的一些信息，除了在CodeProject上找到什么以外，我什么也找不到。但是，它与VC++和对话框有关，我使用的是C。
到目前为止，我唯一能
浏览 1提问于2013-10-27得票数 0
回答已采纳
我已经在Java Swing中创建了一个可拖动的JComponent，并希望显示它比它包含的JFrame更大(它应该是一个游戏地图，可以通过拖放来移动)。当我发现没有找到一种方法来单独显示比框架更大的组件时，我尝试将其放入JScrollPane中并删除水平和垂直滚动条，但Eclipse显示"invalid verticalScrollBarPolicy“。有没有解决这个问题的办法，或者--更好的办法--将我的可拖动JComponent扩展到比JFrame更大的尺寸，而不必将其添加到额外的面板或组件中？
提前感谢！
浏览 0提问于2013-05-22得票数 0
回答已采纳
我正在尝试制作一种基于用户选择的数据覆盖的地图。目前，我只是在同一页上的图像缩小，但它是相当难以阅读。我在想，我可以将整个图像放在一个iframe中，让用户能够在地图上滚动，但我不确定是否可以在两个页面之间使用javascript。有没有可能，或者我必须想出另一种方法来获得全尺寸的图像？
浏览 0提问于2012-11-18得票数 1
回答已采纳
1回答
jVectorMap中的滚动控制
、、、、
我正在使用jVectorMap，没有缩放，一切都很好。
但是当用户放大页面时，我需要允许用户使用垂直和水平滚动条滚动地图。
我尝试过添加overflow-y: scroll;和其他许多选项来执行滚动操作，但是没有什么是完美的。
我可以设置div的宽度和高度来获得滚动条，但它与地图、缩放和缩放无关。
因此，我期待一个滚动条水平和垂直，其中使用该用户可以看到完整的地图，即使它是缩放。
我在网上看到了一张下图的地图。
但我不知道如何在jVector map中添加这样的滚动按钮控件。有人能帮我解决这个问题吗？
浏览 4提问于2018-01-02得票数 0
回答已采纳
2回答
我创建了一个简单的系统来预览我的网站上的图片。预览将在全屏视图中打开，但是图像应该调整水平和垂直的大小。它确实调整了水平尺寸，但当我试图调整垂直尺寸时，它完全失败了。
这是小提琴：
我很感谢你帮我个忙。当我给fullscreenImageContainer 100%的高度时，垂直调整大小似乎是有效的。问题是，然后关闭按钮将不会位于图像的右上角。
浏览 2提问于2017-07-04得票数 0
回答已采纳
1回答
当使用箭头键触发时，如何使窗口以较慢的速度滚动(水平和垂直)？我看过一些视差演示，但它们并不能真正满足我的需求。它们主要集中在背景图像上，而我希望我的整个窗口和/或html正文都慢下来。
谢谢!
浏览 2提问于2015-05-16得票数 0
我试图添加一个背景图像，将滚动与我的垂直scrollView。在添加背景图像之前，我的scrollView只垂直滚动，但是在设置背景图像之后，scrollView现在可以水平和垂直滚动，就好像背景图像的宽度大于滚动视图的宽度一样
let scrollView: UIScrollView = {
let view = UIScrollView()
view.translatesAutoresizingMaskIntoConstraints = false
view.isDirectionalLockEnabled = true
view.isScrollEnabl
浏览 3提问于2020-04-22得票数 0
回答已采纳
5回答
我有一个70x50PX框，我有各种图像(SVG文件，所以没有大小)，我想保持他们的纵横比，但一些图像是肖像，有些是景观大小。所以我可以：
background-size: 70px auto;
这将适用于所有景观图标。但它将拉伸肖像图像，使他们更高，所以他们将仍然有正确的高宽比，但顶部和底部将被切断。
有什么背景-最大尺寸吗？
(或者，我使用背景图像的唯一原因是，您可以对齐图像，水平和垂直，因此可以找到如何在li元素中垂直对齐img元素。)
浏览 0提问于2010-10-29得票数 33
回答已采纳
2回答
我正在开发类似Uber的应用程序(Pin以屏幕为中心，地图只能移动，引脚始终停留在中间)。
我创建了一个网格，其中包含一个图像和一个Xamarin.Forms.Map，并将图像水平和垂直设置为中心，并将地图设置为水平和垂直填充可用空间。这是不对的，因为针的底部不符合地图的确切中心。怎么才能画得稍微高一点，然后再画屏幕的垂直中心呢？见截图：
它真的需要充满活力。
<Grid>
<maps:Map x:Name="DisplayMap" IsShowingUser="true" MapType="Street" H
浏览 0提问于2018-05-18得票数 0
回答已采纳
2回答
是否可以禁用“放大”功能，并使用Fancybox 3图库获得完整的图像大小？并且还支持用于大图像的水平和垂直滚动条。
浏览 7提问于2017-06-16得票数 0
1回答
我知道以前有人问过这个问题，但我的问题得不到答案。我有一个很大的图像，我想显示它的完整尺寸(实际上它是一个自定义地图图像)。我知道可以通过手指滑动来滚动图像，但我的问题是是否有一种方法可以实现垂直/水平滚动视图。我希望能够使用滚动视图功能(滑动手指并自动滚动图像)。在ScrollView中使用HorizontalScrollView也不起作用。水平滚动条只会偶尔出现，您无法同时在两个方向上滚动。任何帮助都是非常感谢的。
非常感谢，
格拉茨
浏览 2提问于2011-02-14得票数 0
3回答
请在这里查看我的小提琴：
我的问题是，在#Frame中，我在#previewItem中有一个图像，无论#frame的尺寸是多少，我如何才能让#previewItem和里面的图像在#frame中水平和垂直居中？使用CSS，不带JS。
谢谢
浏览 0提问于2011-02-09得票数 0
回答已采纳
我有两个滚动条(水平和垂直)在网页(css+html)。此滚动条是浏览器默认控件。
我的问题是:编码的UI不能识别垂直滚动条和水平滚动条作为单个控件，所以不确定在哪里单击滚动。
开发人员正在使用滚动条的css属性。因此，它会自动检测定义的容器(水平和垂直)中的数据溢出。
感谢在这个问题上的帮助，请让我知道如何在网页中水平和垂直滚动。
向你致以最好的问候，Sunil
浏览 1提问于2014-06-25得票数 0
1回答
我想做的是，我想检查程序是否占用了比整个屏幕更少的空间。如果是这样的话，我将使用css中的overflow属性相应地启用水平和/或垂直滚动条。
但是如何获得电子应用程序的维数呢？我已经知道如何获得屏幕尺寸了。
(预先，谢谢:)
浏览 0提问于2018-03-08得票数 0
回答已采纳
1回答
通过拖动鼠标滚动图像
、、、
当我使用水平和垂直滚动条时，我有滚动的图像。但我想像在Photoshop中一样，通过拖动来滚动图像(使用手形工具并浏览缩放后的图像)。在Visual Basic 6.0中有这样的方法吗？我已经将鼠标的默认光标更改为手形光标。现在，我只想通过拖动图像来滚动。
浏览 0提问于2011-04-15得票数 5
回答已采纳
一些具有以下格式的JPEG文件没有显示在Delphi的TImage控件中。
问题解决了..。默认情况下，不选中图像控件中的TImage.Autosize复选框，因此图像没有调整大小。我在做这个项目..。
并将速度与我现有的灰度码进行比较。他们使用的scanline进程似乎比我目前使用的scanline进程略快一些。对于处理图像的人来说，这是一个很好的起点。当我遇到问题并注意到文件大小时，我添加了标准的jpeg转换代码和滚动框。我相信这个问题是正确的，但我重新措辞了。如果我找到另一个更容易找到问题的相关答案，我会撤回这篇文章。如果没有，我就不干了。
比如尼康的数码相机。
尺寸:宽度
浏览 2提问于2017-01-17得票数 0
回答已采纳
1回答
**我是初学者的惯用借口** 我在Android Studio中创建了一个具有垂直滚动视图的活动，并添加了几个项目，其中包括一个webview。 这工作得很好，我可以向上和向下滚动，web视图显示正确。 我的问题是，webview中显示的对象是一个地图(leaflet.js)，只要我移动手指，它就会有自己的水平和垂直滚动。 现在，当我将手指移动到webview水平上方或下方时，什么都不会发生，如果我将它们移动到webview顶部，地图会左右滚动，但不幸的是，每当我垂直移动手指时，滚动视图就会上下移动，而webview保持在完全相同的垂直位置。 当我的手指触摸地图时，是否可以禁用滚动视图的垂直
浏览 11提问于2019-01-10得票数 0
回答已采纳
1回答
我正在尝试使图像可水平滚动，垂直滚动，可缩放，并允许我在图像上放置标记。真的，它就像谷歌地图，但它却是一张信息图。
我试着把它放在两个滚动视图中，答案在这里：。我试过了，但不起作用。
<ScrollView>
<ScrollView horizontal>
<image horizontalAlignment="center" verticalAlignment="center" src="~/assets/images/body.png" stretch="aspectFull"/>
浏览 18提问于2019-11-08得票数 0
下面是我粘贴的代码片段：
<s:Scroller width="100%" height="100%" >
<s:Group width="100%" height="100%" >
<mx:DataGrid id="corrDataGrid" width="100%" height="100%" itemRenderer="
mx.controls.Label" minColumnWidth=&#
浏览 1提问于2012-08-09得票数 0
回答已采纳
1回答
我有一个图像，其中包含文本，并显示良好的大屏幕设备，但在较小的屏幕上，文本无法读取。我决定用一个尺寸在小屏幕上滚动。我使用下面的代码来设置垂直滚动和水平滚动，但它只会垂直滚动。
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="vertic
浏览 3提问于2015-08-12得票数 0
回答已采纳
3回答
我需要添加滚动水平和垂直滚动条。问题是它们不能工作，就像我使用它们时屏幕不动一样。
VScrollBar vScrollBar1 = new VScrollBar();
HScrollBar hScrollBar1 = new HScrollBar();
vScrollBar1.Dock = DockStyle.Left;
hScrollBar1.Dock = DockStyle.Bottom;
Controls.Add(vScrollBar1);
Controls.Add(hScrollBar1);
我使用代码添加滚动条，如何激活它们或使它们根据我的需要工作？
谢谢!
浏览 2提问于2014-09-16得票数 1
回答已采纳
1回答
我在我的应用程序中使用地图的imageView，地图需要滚动，为此我使用了两个水平和垂直滚动视图，但滚动视图中的相对视图操纵图片的坐标，以便String xValue = String.valueOf(event.getX());返回一个大的x，例如400*250的图像中的3200！但是返回的y值是正确的，使用线性布局会导致中描述的问题。(外部相对视图导致此问题)
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content
浏览 21提问于2017-05-05得票数 1
回答已采纳
我想在标签中显示许多图标，但由于图标的数量真的很高，我需要能够在这个标签中水平和垂直滚动。
我做了什么:我创建了一个带有水平和垂直滚动条以及标签的ScrollArea。然而，它似乎不起作用。我在标签上写了一个很长的句子，但滚动条不会移动标签内的内容。实际上，我认为滚动条只与滚动区域有关，而与标签无关。
总而言之:我需要一个固定大小的标签在我的表单上，我将能够水平和垂直滚动。
浏览 0提问于2018-12-20得票数 0
2回答
假设我有一个尺寸为40x39的图像。我需要增加一条线到图像，所以最后的图像是40x40的尺寸。我怎样才能水平和垂直地做到这一点呢？
我试过了
img = cv2.imread('image.jpg')
blank_image = np.zeros((1, 40, 3), np.float32)
img = np.concatenate((img, blank_image), axis=1)
但这给了我一个错误，
ValueError: all the input arrays must have same number of dimensions
浏览 5提问于2016-02-20得票数 2
回答已采纳
1回答
我有一个包含数据网格的画布。我将画布的水平和垂直滚动设置为“off”，将DG的水平和垂直滚动设置为“auto”。直到我在DG (>=16)中有了更多的列，垂直滚动条才会出现。有没有人看到这个，更好的是，有一个答案？
浏览 4提问于2009-01-14得票数 0
1回答
我想在iphone应用程序中设置圆角滚动视图。
在下面的苹果商店链接上也有同样的效果。
我尝试过水平和垂直滚动视图。可以设置圆形滚动视图或拱形滚动视图吗？
提前谢谢。任何想法都是非常受欢迎的。
浏览 1提问于2010-11-16得票数 0
回答已采纳
嗨，
我需要一个简单的网格视图与水平和垂直滚动条使用Jquery或简单的javascript或php，谁能建议我一个简单的网格视图插件？
浏览 0提问于2009-12-28得票数 0
1回答
如何在Angular2 Nativescript (专注于Android)中同时实现大图像的水平和垂直滚动？
使用嵌套的ScrollViews允许用户一次只能在一个方向上滚动-我想要对角线滚动，但不能。
<ScrollView orientation="horizontal">
<ScrollView>
<image src="~/img/largeimage.png" stretch="none"></image>
</ScrollView>
<
浏览 1提问于2017-04-18得票数 1
我想显示一个图像左对齐(在左/右有一些填充)，但垂直居中的表格单元格，同时保持文本的水平和垂直居中。
JSFiddle完整示例：
<tr>
<td>
<img title="Out of stock" src="..."><!-- This image may or may not exist -->
<a href="">4000.4</a>
</td>
<td>Lemon soda</td>
<t
浏览 2提问于2021-11-20得票数 0
回答已采纳
1回答
我在试着展示一个响应式的旋转木马。我在幻灯片中有水平和垂直的图像(H尺寸:1400x935。V尺寸: 624 x 935)。 此项目中出现问题：https://www.luismatera.art/las-matas-via-muerta-i.html 主要的问题是，每次幻灯片从水平变为垂直时，文本都会上下移动。 我有这个css代码(提供了here)： .carousel-fade .carousel-item, .carousel-item img {max-height: 90vh;} 在src图像中： class="d-block img-fluid" 但是它不能正常工
浏览 28提问于2019-02-04得票数 0
我和contentMode UIViewContentModeScaleAspectFit有一台imageView。因此，它可以在不更改纵横比的情况下调整图像大小。但是图像视图中的图像是水平和垂直居中的。
我不想让它垂直居中。如何将此图像移动到imageview的上端？
浏览 4提问于2010-12-20得票数 0
无论我如何尝试，我都无法为以下行为找到合适的CSS：
A:大于窗口的图像显示图像的左上方，并允许滚动查看其馀部分。(重要的是:家长的DIV背景是覆盖的，但应该是透明的在图像上可见--即使你滚动。)
B:比窗口小的图像是水平和垂直中心的，父DIV覆盖整个窗口.
谢谢你的帮助！
浏览 3提问于2017-03-09得票数 0
回答已采纳
1回答
我想在小控件中显示大图像，以便整个图像可以滚动。为此，我使用了以下代码，但我只能成功地实现垂直滚动。我应该怎么做才能同时启用水平和垂直滚动？
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Width="470">
<ScrollViewer x:Name="scrollViewer" Width="470" Height="270" Hori
浏览 2提问于2015-05-30得票数 0
我是Android SDK的初学者。我已经探索了一些在Android上支持多屏幕的东西。
我想出了9个补丁镜像可以达到这个目的。
假设我有一个图像，其中没有我可以水平和垂直重复的部分。九补丁图像总是解决所有类型的图像的问题，以支持多种屏幕尺寸吗？对于这种类型的图像，可能的最佳解决方案是什么？
谢谢,
吉姆。
浏览 1提问于2012-01-05得票数 1
1回答
我想知道是否有可能让鼠标像谷歌地图那样移动网页。如果可能的话，我该怎么做的基本想法是什么？
我目前正在规划一个网站，我的一个想法是让用户点击并拖动来在2维空间中移动。这种体验类似于谷歌地图，在谷歌地图中，你可以点击并拖动来在空间中移动。
我看过一些代码片段，允许你用鼠标水平滚动，但我找不到任何允许你同时水平和垂直滚动的代码。
以及如何实现这一点的提示或想法是值得赞赏的。
浏览 1提问于2020-04-25得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
