网站制作怎么通过CSS3控制图片大小

2022-06-06    分类: 网站制作

做网站之后,我们会在网站后台发布很多的文章内容。文章里会插入一些图片,由于图片尺寸不一样,会出现图片超过宽度的问题。特别是制作手机网站时,更容出现这种情况。如何通过CSS3来一次性控制网站所有图片自适应大小呢?下面介绍一下CSS3控制图片自适应屏幕大小的方法。

CSS3

▏通过CSS3控制图片尺寸自适应的方法很简单,只要将以下的CSS样式代码放到自己网站的CSS文件里即可。(如果不了解什么是CSS,请先学习一下网站建站常识)

◤.cont img{max-width:99.99%;height:auto;}

代码解释:代码里的cont修改成自己的class名。通过控制图片的大宽度值为99.99%,而不是直接控制图片宽度,避免了图片被压缩变形。

▏如果要让网站图片始终居中显示,只需要加上以下的CSS样式;

◤.cont img{display:block;margin:0 auto;}

▏所以,CSS3控制图片自适应屏幕大小和居中显示的CSS样式代码就是将二者合并一起。如下:

◤.cont img{display:block;margin:0 auto;max-width:99.99%;height:auto;}

新闻名称:网站制作怎么通过CSS3控制图片大小
URL地址:/news0/163800.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有网站制作

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

h5响应式网站建设