不用js 怎么让div宽高相等

不用JavaScript让DIV宽高相等的方法有：使用百分比、利用视口单位、使用相对单位、使用Flexbox布局、利用Grid布局。 其中，Flexbox布局 是最常见且简单的方法。Flexbox允许你轻松地在不同设备和屏幕尺寸下维持DIV的宽高相等。以下将详细介绍如何使用Flexbox布局来实现这一目标。

一、使用百分比

通过百分比设置宽高，可以实现DIV宽高相等。宽高比例设定为100%时，容器的宽高将自动保持一致。

.square {
  width: 50%;
  padding-top: 50%; /* 高度为宽度的50% */
  background-color: lightblue;
  position: relative;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

在这种方法中，利用了padding-top的百分比值相对于元素宽度的特性，从而使高度等于宽度。

二、利用视口单位

视口单位（vw和vh）是相对于视口宽度和高度的单位。通过这些单位，可以轻松实现宽高相等的效果。

.square {
  width: 50vw;
  height: 50vw;
  background-color: lightgreen;
}

这里使用了vw，即视口宽度的百分比。同样地，也可以使用vh，根据具体需求进行调整。

三、使用相对单位

CSS中还有其他相对单位，比如em和rem，它们可以根据父元素或根元素的字体大小来设置元素的宽高。

.square {
  width: 10em;
  height: 10em;
  background-color: lightcoral;
}

这种方法需要确保容器的字体大小一致，从而保证宽高相等。

四、使用Flexbox布局

Flexbox布局是实现宽高相等的一种非常强大且灵活的方法。通过设置align-items和justify-content可以实现这一目标。

.container {
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.square {
  flex: 0 0 100px; /* 固定宽度 */
  height: 100px; /* 固定高度 */
  background-color: lightblue;
}

这种方法不仅可以实现宽高相等，还可以轻松地进行布局调整，使其适应不同的屏幕尺寸和设备。

五、利用Grid布局

CSS Grid布局也是一种强大的布局工具，可以轻松实现宽高相等的效果。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  grid-auto-rows: 100px; /* 固定行高 */
}
.square {
  background-color: lightcoral;
}

这种方法通过设置网格模板列和行的宽高比，确保每个单元格的宽高相等。

六、使用背景图片技术

有时需要使用背景图片来保持宽高相等。通过背景图片技术，可以确保图片在容器内保持宽高比。

.square {
  width: 50%;
  padding-top: 50%; /* 高度为宽度的50% */
  background-image: url('example.jpg');
  background-size: cover; /* 确保背景图片覆盖整个容器 */
  position: relative;
}

七、利用CSS变量

CSS变量是CSS的一种强大功能，通过CSS变量可以动态设置宽高比。

:root {
  --square-size: 100px;
}
.square {
  width: var(--square-size);
  height: var(--square-size);
  background-color: lightgreen;
}

通过CSS变量，可以方便地在不同的地方使用相同的宽高设置，从而保持一致性。

八、结合媒体查询

使用媒体查询可以在不同屏幕尺寸下调整宽高比，确保在各种设备上都能保持宽高相等。

.square {
  width: 50vw;
  height: 50vw;
  background-color: lightblue;
}
@media (max-width: 600px) {
  .square {
    width: 80vw;
    height: 80vw;
  }
}

这种方法可以确保在不同的设备和屏幕尺寸下，DIV的宽高都能保持相等。

九、使用高级CSS属性

CSS中一些高级属性，比如aspect-ratio，可以直接设置宽高比。

.square {
  aspect-ratio: 1 / 1;
  width: 50%;
  background-color: lightcoral;
}

这种方法非常简单直接，但是需要注意的是，并不是所有浏览器都完全支持aspect-ratio属性。

十、总结

通过以上几种方法，可以轻松实现DIV的宽高相等。Flexbox布局 是其中最常见且简单的方法，适用于各种布局需求。同时，结合媒体查询和CSS变量，可以确保在不同设备和屏幕尺寸下都能保持一致的效果。在实际项目中，可以根据具体需求选择合适的方法，灵活运用这些技术，确保页面布局美观且一致。