1.html中怎么把图片按比例缩放在里面

首先，你使用span元素并不是很合理，因为span元素是行元素，不能够设置宽高

如果一定要使用span元素，需要设置宽高，之后对图片进行处理

将span元素调整为块元素（设置display: block），赋予固定的宽度或百分比

之后为图片设置宽度和高度，宽设置为100%，即可让图片等比例进行缩放，宽度等于span的宽度，高度会等比例变化

.box {

display: block;

width: 200px;

}

.box img {

width: 100%;

}

2.html页面里面如何实现点击小图放大查看大图

需要准备的材料分别有：电脑、浏览器zhidao、html编辑器。

1、首先，打开html编辑器，新建html文件内，例如：index.html。

2、在index.html中的<style>；标签中，输入css代码：

div {width: 72px;height: 72px;background: url(small3.png) no-repeat;overflow: hidden;}

3、浏览器运行index.html页面，此时成功将矩形图片只显示容了正方形部分。

4、点击小图后，成功显示了大图。

3.html中,有什么方法或标签能让图片大小自动按设定放大缩小的

使用javascript，根据你的设定设置img大小，这里有个例子：

function AutoResizeImage(maxWidth,maxHeight,objImg){

var img = new Image();

img.src = objImg.src;

var hRatio;

var wRatio;

var Ratio = 1;

var w = img.width;

var h = img.height;

if(w > maxWidth){ //判断宽度大于可视化的情况

wRatio = maxWidth / w;

hRatio = maxHeight / h;

if (maxWidth ==0 && maxHeight==0){

Ratio = 1;

}else if (maxWidth==0){//

if (hRatio<1) Ratio = hRatio;

}else if (maxHeight==0){

if (wRatio<1) Ratio = wRatio;

}else if (wRatio<1 || hRatio<1){

Ratio = (wRatio<=hRatio?wRatio:hRatio);

}

if (Ratio<1){

w = w * Ratio;

h = h * Ratio;

}

objImg.height = h;

objImg.width = w;

}

}以上是js的方法

下面这个是引用的img

<img id="lc_div" src="图片路径" onl oad="AutoResizeImage(500,500,this)" />

4.html图片如何按屏幕大小等比例缩放

html图片按屏幕大小等比例缩放若浏览器允许可按Ctrl+鼠标滚轮滑动缩放，或用代码。

具体方法如下：

1. Ctrl+鼠标滚轮滑动缩放

2. css代码与htlm代码

3. CSS 代码如下：

#background

{

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

background-color: #211f1f;

display:none8;

}

#background .bg-photo

{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: none;

overflow: hidden;

-webkit-background-size: cover !important;

-moz-background-size: cover !important;

-o-background-size: cover !important;

background-size: cover !important;

}

#background .bg-photo-1

{

background: url('../image/alone.jpg') no-repeat center center;

}

#background-ie {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

background-color: #211f1f;

}

4. HTML代码如下：

<div id="background">

<div class="bg-photo bg-photo-1" style="display: block;"></div>

</div>

参考资料

html 网页背景图片根据屏幕大小CSS自动缩放.CSDN博客[引用时间2017-12-29]

5.html背景图片如何自动缩放,

纯HTML没办法做到自动缩放，至于JS我就不清楚了。

我这边推荐HTML两种方法：

1、同时制作手机端、PC端、IPAD端三张背景图片。根据不同环境调用！

2、只做一张图，利用background-image的background-size：属性来适应屏幕，如下代码； background-image:url(../image/img.png); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}