您现在的位置是: 首页 » 网页代码 » css如何改变图片大小?
网页代码

css如何改变图片大小?

网站优化小编十一月 2, 2019 9人已围观

在前端页面的开发中,图片的显示方法有两种,分别为:img标签显示图片,background属性设置为背景图片显示。我们该如何使用css来改变图片的大小呢?

网站运营中栏目排名优化技巧

1、css改变img标签显示图片大小可以通过更改img标签的height和width属性的值来改变图片的大小。

<html>

<body>

<img src="/i/bg_flower.gif" width="50" height="50">

<br />

<img src="/i/bg_flower.gif" width="100" height="100">

<br />

<img src="/i/bg_flower.gif" width="200" height="200">

<p>通过改变 img 标签的 "height" 和 "width" 属性的值,您可以放大或缩小图像。</p>

</body>
</html>

效果图:

网站运营中栏目排名优化技巧

2、css通过background-size 属性规定背景图像的尺寸。

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background:url(/i/bg_flower.gif);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>

<body>
<p>上面是缩小的背景图片。</p>

<p>原始图片:<img src="/i/bg_flower.gif" alt="Flowers"></p>

</body>
</html>

效果图:

网站运营中栏目排名优化技巧

相关文章

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:195天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:2413 条
  • 文章评论:4 条
  • 微信公众号:扫描二维码,关注我们