一站式百度SEO排名优化!-找老刘博客 低投入,高转化,精益求精、一丝不苟:旨在提供更好的SEO服务!

首页>>前端开发

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

首页 2023-05-31 前端开发 961 ℃Tags: css3 图片居中


小e说

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


image.png



01



图片自动缩放

只要将以下的CSS样式代码放到自己网站的CSS文件里即可。(如果不了解什么是CSS,请先学习一下网站建站常识)



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


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



02




图片居中

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

图片



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

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


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


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


搜索
分类
热门标签
  • 首页
  • 电话
  • QQ