这篇文章主要介绍了css缩小图片的方法有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css缩小图片的方法有哪些文章都会有所收获，下面我们一起来看看吧。

代码部分：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>css怎么改变图片大小</title><styletype="text/css">*{margin:0;padding:0;}</style></head><body><divalign="center"><imgsrc="img/00.jpg"/><p>还未缩小</p></div></body></html>

方法一：

通过元素名称来改变图片的大小。例如，在css标签内，使用css定义div元素内的img元素的宽度为200px,高度为100px。代码如下所示：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>css怎么改变图片大小</title><styletype="text/css">divimg{width:200px;height:100px;}*{margin:0;padding:0;}</style></head><body><divalign="center"><imgsrc="img/00.jpg"/><p>缩小之后</p></div></body></html>

方法二：

通过给img标签设置一个id属性，在css中通过id属性，使用width(宽度)和height(高度)设置样式，实现改变图片的大小。代码如下所示：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>css怎么改变图片大小</title><styletype="text/css">#img-picture{margin-top:50px;width:200px;height:100px;}</style></head><body><divalign="center"><imgsrc="img/00.jpg"id="img-picture"/><p>缩小之后</p></div></body></html>

方法三：

通过给img标签设置一个class属性，在css中通过class属性，使用width(宽度)和height(高度)设置样式，实现改变图片的大小。代码如下所示：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>css怎么改变图片大小</title><styletype="text/css">*{margin:0;padding:0;}.img-picture{width:200px;height:100px;}</style></head><body><divalign="center"><imgsrc="img/00.jpg"class="img-picture"/><p>缩小之后</p></div></body></html>

方法四：

通过在img标签内，使用style来设置width(宽度)和height(高度)属性。代码如下所示：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>css怎么改变图片大小</title><styletype="text/css">*{margin:0;padding:0;}</style></head><body><divalign="center"><imgsrc="img/00.jpg"/><p>缩小之后</p></div></body></html>

关于“css缩小图片的方法有哪些”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“css缩小图片的方法有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。