网页图片如何放大显示

Posted 2023-05-12

做了一个网页,上面有一幅扫描的地图，由于太大，2200X3000的大小，所以就做了一个连接单独观看这幅图片，点击打开，当图片全部显示后，一下子就变小了，如何才能让他继续大图显示．也就是带滚动条浏览．网页地址是
http://ip18623.vdns.com.cn/cn/contact_us.htm
点击下面的彩色地图．
谢谢．
我想要的结果是,在别人的电脑上,一打开就是大图,而不会变小.

打开第三方浏览器；

在浏览器的页面中，选择“查看”；

在查看中选择放大或缩小功能，同样也可使用快捷键来放大缩小网页，使用放大“Ctrl+”,使用缩小“Ctrl-”；

还可以使用浏览器右下方的快捷按键，来调整网页的大小；

或者使用“Ctrl+鼠标滑轮上下”来调整网页大小；

IE浏览器的时候，在IE浏览器的界面中选择点击“工具”；

在工具，鼠标移动到“缩放”在弹出的放大缩小中，选择要放大的比例。也可以使用快捷键来放大缩小网页，使用放大“Ctrl+”,使用缩小“Ctrl-”。

参考技术A 1 可以用JS改变那张图片的SRC（路径）。如：document.getelementbyid("id").src="....";当然路径里可以带上图看的高和宽。这样来改变的图片！
2 可以Display，来显示和隐藏。
3 也可以是一个弹出层。里面引用的一张较大的图片，这个代码有点多。如果需要可以发MAIL。
网页是一个包含html标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。 参考技术B 换浏览器！！很多都支持得！不过也有放大镜 可以使用得！！很多得！！随便下载个就可以用啦！ 参考技术C 可以实现 就是价格鼠标动作语句（java），恩，要求原图要大，你在网页中的就限制显示高宽
add to body
<img id=MainImg onmouseover=max() onmouseout=min() src=/view/js/3.jpg width="150" height="100">
<script>
var i=0
//变大
function max()
MImg=MainImg.style.pixelWidth+=i++
MainImg.style.pixelHeight=MImg*aaa
if(i<20)setTimeout('max()',100)


//变小
function min()
MImg=MainImg.style.pixelWidth-=i--
MainImg.style.pixelHeight=MImg*aaa
if(i>0)setTimeout('min()',100)


function init()
aaa=MainImg.height/MainImg.width
MainImg.style.pixelWidth=150
MainImg.style.pixelHeight=100


onload=init
</script>

or

<span id="s1" style = "width : 100">
<a href="index.shtml"
onmouseover="img1.style.width='95';"
onmouseout="img1.style.width= '67';">
<Img src="link1.gif" id="img1">
</a>
</span> 参考技术D 在 查看-网页缩放里可以缩放

小程序webview 页面被放大_WebView显示的网页在大分辨率屏下被放大--解决方案

例如适合800px宽度的页面，如果通过WebView在1024px的屏幕宽度下显示时，内容(图片)会被放大，整体页面会超出屏幕。

试了将WebView的settings中的缩放都关闭了也不行。

后来发现了WebSettings.ZoomDensity这个设置，并在文档中找到了以下说明：

Enum for specifying the WebView's desired density. FAR makes 100% looking like in 240dpi MEDIUM makes 100% looking like in 160dpi CLOSE makes 100% looking like in 120dpi

这样就能很好的说明以上问题的原因了，又是密度惹的祸...

默认WebView的ZoomDensity是MEDIUM，对应160dpi。而我之前800px宽度的屏幕对应的是60dpi，1024px宽度的屏幕对应的是240dpi。所以，页面在高分辨率的屏幕上被放大了1.5倍。这个和图片自缩放的机制是一样的。

于是，只要通过当前屏幕的密度，动态设置该属性就能适应不同屏幕(当然，默认你的页面是针对160dpi的密度大小设计的),即可解决：

int screenDensity = getResources().getDisplayMetrics().densityDpi ;

WebSettings.ZoomDensity zoomDensity = WebSettings.ZoomDensity.MEDIUM ;

switch (screenDensity)

case DisplayMetrics.DENSITY_LOW :

zoomDensity = WebSettings.ZoomDensity.CLOSE;

break;

case DisplayMetrics.DENSITY_MEDIUM:

zoomDensity = WebSettings.ZoomDensity.MEDIUM;

break;

case DisplayMetrics.DENSITY_HIGH:

zoomDensity = WebSettings.ZoomDensity.FAR;

break ;

webSettings.setDefaultZoom(zoomDensity);