RELATEED CONSULTING
相关咨询
选择下列服务马上在线沟通
服务时间:9:00-20:00
你可能遇到了下面的问题
关闭右侧工具栏

技术支持

图片自适应大小和居中显示的CSS语法教程

  • 作者:郑州融科网络
  • 发表时间:2019-09-11
  • 人气:

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

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

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

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

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

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

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

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


本文章网址,转载请保留此链接http://www.zzvy.cn/cms/1736.html
本文标签: CSS语法
相关阅读: