做网站之后,我们会在网站后台公布很多的文章内容。文章里可以插入一些图片,由于图片尺寸不一样,会发生图片超过宽度的问题。特别就是制作手机网站时,更孟出现这种情况。如何通过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;}
有关专题
相关推荐
标签:
留言与评论(共有 0 条评论) |