html插入一张图片是全屏宽的，缩小浏览器图片是从右边开始减少的，怎么样才能让图片从两边开始减少？

Posted 2023-05-03

html插入一张图片是全屏宽的，缩小浏览器是从右边开始减少的，怎么样才能让图片从两边开始减少？

width:100% 设定为100% 图片宽度会随着浏览器大小任意缩放追问

把浏览器缩小就这样了，我想弄成这样的效果



追答

比如这张图片是在一个div里面,给div设定宽度，或者设立背景图片，然后再给图片设定宽度，居中就会钉死位置，缩小窗口也会不动..

再在样式中把图片居中

参考技术A 全屏的图片如果是单个的图片的话，想让它居中显示那只能用做背景图片了，比如一个div
<style>
.bannerwidth: 100%;height: 400px;background: url(images/index_banner.jpg) no-repeat top center;
</style>

<div class="banner"></div>

如果是全屏的图片切换的话就只能用js效果了，你可以到网上下载一个插件，这种效果有很多的
http://www.lanrentuku.com/js/jiaodiantu-989.html
你可以借鉴一下这个 参考技术B 给你的图片加个id，比如img1； 然后你在js的onload里面这样写

document.getElementById("img1").style.width=document.documentElement.clientWidth+“px”
这样的话，图片会根据你屏幕的宽度自动适应。不管你窗口放大还是缩小 参考技术C 你的图片是设置居中的吗？追问

对的，是宽度是全屏的，高是600px

追答

你给他一个框架，框架给居中再看看呢

追问

缩小后，图片就只能看到左边，我只想让图片显示中间。

追答

我刚试了，的确不行。不过那样不影响使用的啊

C#在winform上画一张大于全屏的图片(至少3000*3000像素)。在窗口最大化下用鼠标拖动图片，必须画面流畅。

使用PictureBox的滚动条的方案(包括DX)就不要说了。
我现在已经不知道C#能不能实现上面的要求了，现在的关键麻烦在于移动图片时，都能看到绘制的过程(就像波浪一样)，不流畅啊！(双缓冲不顶用)。
哪位高手有能实现上面要求的代码不(最好是能看到效果的)？
如果你没C#的代码,给我C++(我刚学，自己写还不熟练，看得话完全没问题)的也行。
再次声明一下，不一定只用鼠标拖的哈，我主要是想要在全屏下实现移动图片时必须流畅这个效果的代码。(图片，全屏，移动，流畅)
哪怕你没代码，知道哪有用C#的写的能实现这个效果的程序也行，告诉我，我去下来看看。

你要画这么大像素的图，内存都耗死你，得用一些技巧
给你个思路，没有代码，是我之前做过一个项目（web版）是浏览图片的，航拍图（像素1万*1万以上），做法是先把图片分割成小块（比如100*100），定义好每一张图的名称（用位置表示），显示的时候取相应的图片显示即可，就像很多电子地图就是这么做的

希望对你有用 参考技术A bool flag = false;
int x, y;
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)

if (flag)

pictureBox1.Left = pictureBox1.Left + (e.X - x);
pictureBox1.Top += e.Y - y;//pictureBox1.Top=pictureBox1.Top+(e.Y-y);当鼠标按下时，图像跟着鼠标动

//Rectangle rect = new Rectangle();
//rect = Screen.GetWorkingArea(this);
Bitmap bmp = (Bitmap)pictureBox1.Image;
try

Color pointColor = bmp.GetPixel(e.X, e.Y);//获取图像像素
textBox2.Text = pointColor.R.ToString();
textBox3.Text = pointColor.G.ToString();
textBox4.Text = pointColor.B.ToString();

catch

private void pictureBox1_MouseDown(object sender, MouseEventArgs e)

flag = true;
x = e.X;
y = e.Y;

private void pictureBox1_MouseUp(object sender, MouseEventArgs e)

flag = false;

这个可以用鼠标来拖动图像移动你试试