gpt4 book ai didi

响应式网页设计中的宽度与最大宽度

转载 作者:太空宇宙 更新时间:2023-11-04 00:06:06 24 4
gpt4 key购买 nike

在响应式网页设计的教程中推荐图片使用 max-width:100% 以使其灵活。为什么我们可以为此目的使用 width:100% ?

最佳答案

我有同样的问题,我认为这是经过小实验后的答案:

width:100%; 无论发生什么情况都会缩放图像的宽度。

  • 100% 大于该图像的原始分辨率时,图像会不断缩放,因此看起来很模糊。
  • height 分配给该图像时,宽度会保持缩放并因此变得拉伸(stretch)。

max-width:100%; 更仔细地缩放图像的宽度。

  • 100% 大于该图像的原始分辨率时,图像停止缩放并看起来很精致。
  • height 分配给该图像时,宽度停止缩放并保持纵横比。

所以我认为这就是人们使用 max-width 而不是 width 的原因。

实验的屏幕截图:here (素描图为600 px * 432 px)

实验网页:here

关于响应式网页设计中的宽度与最大宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14826248/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com