css如何设置图片宽高相等

CSS是网站开发中经常使用的技术，图片宽高的设置也是CSS中常用的一种功能。本文将介绍如何使用CSS设置图片的宽高相等。 要设置图片的宽高相等，需要使用CSS中的简写属性“width和height”。下面的代码展示了如何设置图片的宽度和高度相等。

img{
    width: 200px;
    height: 200px;
}

在这个例子中，我们设置了img元素的宽度和高度都为200px。这将导致图片显示为正方形。 如果你想要图片的大小随着浏览器窗口的大小变化而自适应，可以使用相对单位来指定宽度和高度。

img{
    width: 50%;
    height: auto;
}

在这个例子中，我们使用了相对单位“%”，将图片的宽度设置为浏览器窗口宽度的50%。高度使用“auto”，自动适应宽度。这将导致图片与浏览器窗口的大小成比例地缩放。 如果你想要让图片在容器中居中显示并保持宽高相等，可以使用CSS的flexBox布局。

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}
img{
    width: auto;
    height: 100%;
}

在这个例子中，我们将容器设置为flexBox布局，使图片可以水平和垂直居中显示。我们还设置了容器的高度为400px。图片的宽度使用“auto”，高度使用“100%”来保持宽高比例不变。 总结： CSS可以非常灵活地控制图片的大小和位置。无论你想要图片显示为正方形还是自适应大小，都可以使用CSS来实现。使用简写属性“width和height”可以设置图片的宽高相等；使用相对单位可以让图片自适应大小；使用flexBox布局可以让图片居中显示并保持宽高比例不变。