css 宽度设置100%,怎么设置让高度和宽度相等?

css 宽度设置100%,怎么设置让高度和宽度相等?

阅读 15.3k
4 个回答

提供一种思路:

{
  width: 100%;
  padding-top: 100%;
}

用padding百分比设置,百分比是基于父元素的宽度的百分比的内边距, 你css设置 width: 100%;padding-top: 100%;position: relative;子元素设置position: absolute;top: 0;left:0;width: 100%;height: 100%;

百分比去父级找定值,有效值通常是根据这个定值计算而来的。但如果是做宽高全等这种需求的话,用百分比做单位我觉得本身不太合适,建议采用可以方便的转换为一个固定值的单位,比如rem或者vw、vh,比如都用40vw或者40rem,那么就不存在这个问题。

放一个1*1的图片 width=100%

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题