网易出品    必出精品
0510-881001984007-999-163
客服热线400-710-6678
×

我要网站建设介绍PPT,输入邮件地址,我们把最新的PPT介绍资料发给您。



标 题:网站制作怎么通过CSS3控制图片大小
日 期:2019.04.09
位 置:首页>新闻> 建站技巧 >网站制作怎么通过CSS3控制图片大小

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

转载请注明来自:/news/industrynews/86096.html

标签:网页设计  移动端   海之睿


热门文章

优化知识 公司动态 建站技巧
Are You Interested ?
感兴趣吗?
与我们联系了解更多吧
有一个互联网项目想和我们谈谈吗?您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与你取得联系。当然也欢迎您给我们写信或是打电话,让我们听到你的声音!
  • 网站服务热线:400-710-6678
    邮箱服务热线:400-799-9163
  • 电话:0510-88100198 渠道:0510-80211762
  • 地址:无锡市滨湖区蠡湖大道2018号普信copo 3栋810室
  • E-mail:fuwu@haizr.com

合作意向表/ Cooperation Form

您需要的服务

您最关注的地方

预算

(欢迎与海之睿网站建设公司建立友情链接,首页交换pr>5,百度排名较好的网络公司及相关行业网站)

版权所有 无锡海之睿计算机科技有限公司