怎么将网页中的图片调整到最佳大小

在网页制作中，有多种方式可以将调整为合适的大小：
一、使用CMS系统管理网站的内容页面：CMS管理网站的内容比较方便，进入后台，添加或者选中已有的页面标题，会出现类似如图的界面，其中椭圆形标记的是编辑控件，方形框就是图像上传按钮：
点击这个按钮后会有上传等 *** 作选项，如图：
在这个对话框里，有宽度、高度，可以直接设定图像的大小，右侧的小锁头图标是宽高比例锁定，也就是说，只要改变宽度或高度，整个图像就会按比例调整。因此，若是在一片文章里有多幅图像，建议将的宽或高度统一设置为640或320像素。
大多数CMS管理系统与此设置方法类似。
二、若不是通过CMS管理系统添加，则需要通过Dreamweaver或者其它网页编辑器（如记事本），使用代码和参数来控制每个的大小。具体代码为：<img src="/XXXjpg" width="50" height="50">
其中，“img”是图像元素标签，src是图像的源路径，这个路径可以是从其它网站的链接地址，也可以是本地服务器的地址，本例中的路径即等号后面的内容是本地服务器（或网站所在服务器的图像目录），注意：前引号后面的表示网站根目录，这个地址也可以为“/pic/XXXjpg”，“pic”是图像所在目录。后面的width和height是定义图像大小的两个参数，分别表示图像的宽带和高度，注意，引号是不能缺少的。

html设置大小：在img标签上设置大小、或者使用css样式控制大小。 *** 作方法如下。

设备：戴尔Inspiron15

系统：Win10

软件：visual studio code1552

1、首先打开电脑之后，如下图所示，新建一个“cs”文件夹，在文件夹中存储一张用来做演示。

2、接着打开visual studio code点击“文件”-“打开文件夹”，选中上一步建立好的“cs”文件夹。

3、然后点击“cs”右侧的“新建文件”图标，创建一个“1html”文件，在空白html文件中输入一个英文“!”按Tab键填充html基本代码。

4、接着在body中插入img标签，alt规定图像的替代文本，src规定显示图像的URL。

5、然后在img标签上使用width属性设置宽度、height属性设置高度。

6、最后在title标签下面插入style标签（如下图所示），接着在style标签中编辑css样式，如下图所示，img{width:100px;height:auto}，这里表示把设置为100px宽、auto表示高度根据比例自适应。设置大小就完成了。

1、首先打开html编辑器， 设置一个div并对div设置固定宽度和高度，还要在div里面插入一张。

2、接着在上方设置div和img的样式，将的宽度设置为何父级一样的宽度，代码就是“width:100%;”这里的100%会自动跟随父级的宽度选择，然后将父级的高度去掉，这样子集的高度就自动化了。

3、最后将设置为display:block;转为块状就可以了。

4、最后打开浏览器就可以看到固定大小的了。

一、最简单的 <img src="" width="500" height="300"> 其中width为的宽，height为的高
二、用CSS来控制
<div class="img_div"><img src=""></div>
css文件里写
img_div img{widht:500px;height:300px;}

首先在在外部放一个div包裹img，然后给div定义你需要的宽高，然后将img的width和height都设置为100%；在给添加object-fit: cover;这样不管多大，都可以适应div的宽高，而且还不失真。
imgbox{ width:300px;height:200px;overflow:hidden;}
imgbox img{width:100%;height:100%;object-fit: cover;}
<div class="imgbox">
<img src="路径">
</div>

---