您当前位置:网站首页 > 网站制作 > 正文

CSS3控制图片自适应屏幕大小和居中显示

作者:赵军 浏览次数:112
  做完网站后,我们会在网站的后台发布很多文章。一些图像将插入文章中。由于图像的大小不同,图像的宽度会有问题。制作移动网站时尤其如此。如何通过CSS3一次控制网站上所有图像的自适应大小?以下是CSS3如何控制图像响应屏幕大小。
 
  CSS3控制图像自适应屏幕大小
 
  通过CSS3控制图像大小适应的方法非常简单,只需将以下CSS样式代码放入您网站的CSS文件中即可。 (如果你不知道CSS是什么,请首先学习网站建设知识)
 
  .cont img {max-width: 100%; height: auto;}
 
  代码说明:代码中的cont更改为自己的类名。通过将图像的最大宽度控制为100%而不是直接控制图像的宽度,可以防止图像被压缩和变形。
 
  如果您希望站点图像始终居中,只需添加以下CSS样式;
 
  .cont img{display:block;margin:0 auto;}
 
  因此,CSS3控制图像自适应屏幕大小,居中显示的CSS样式代码是将两者合并在一起。如下:
 
  .cont img{display:block;margin:0 auto;max-width:100%;height:auto;}
广告
大连网龙网络科技有限公司 版权所有 辽ICP备14006349号
电话:400 - 048 - 0001 在线QQ客服:169*589*5999
Copyright © 2009-2015, 大连网龙科技, Inc.All Rights Reserved.