使用max-width设置图片宽度的好处

最近更新时间: July 26, 2024

使用max-width设置图片宽度可以使我们的图片“自适应能力更强”,同时也可以提高我们网站的用户体验度。比如,在网页中设置图片的宽度的时候您是否遇到过以下情况:

  • 手机端为了做图片适配设置了width值为100%,对于大尺寸的图片还好,但是小尺寸的图片就会出现自动放大产生模糊现象,但是如果不设置,图片太大又会溢出手机屏幕。
  • 电脑端为了显示图片真实尺寸,没有设置width属性值(默认为auto),于是就出现有的图片太大撑破了图片正文部分。但是如果设置了width属性值为100%,那么对于宽度较小的图片,又会自动放大,使图片变的模糊。

当然有人说可以把width设置为固定值,但是一个网站中的图片多种多样,其尺寸比例大小各方面可能是多种多样的,如果强制设置宽度(这里默认高度height值为auto),会造成不同设备之间不兼容,因为宽度大小固定,所以在电脑,手机上面显示的也是固定的,那么我们该把width值设置为多合适?

如果你遇到以上问题,则可以通过神奇max-width属性来解决,只需要将其属性值设置为100%,字面上理解就是设置元素允许最大宽度为100%。

max-width设置图片宽度

它的作用(好处):

  • 当图片宽度小于其上一级(父级)元素宽度时,显示的是实际尺寸,无论是在电脑端还是手机端都一样。
  • 当图片宽度大于等于其上一级(父级)元素宽度时,显示的是父级元素的宽度,同时适用于电脑端和手机端。

总结:使用max-width属性设置图片宽度简单方便又实用,比传统的使用width属性要好很多,虽然这只是一个小小的细节,但其实做谷歌seo更多的时候也是在做的这些微小部分。

版权声明©:希望对您会有所帮助;转载请注明出处。

文章Tags: ,

欢迎留言评论!

Your email address will not be published. Required fields are marked *

大简笔记微信公众号

欢迎关注微信公众号随时了解最新知识分享

E-mail: hellojack202102@gmail.com

Privacy Policy Sitemap

Copyright 2024 Dajian Biji All Rights Reserved.