如何使用CSS设置图像的高度与宽度相同

Question

在我的项目中，有一些图像。我的代码如下：

<div className="col-sm-6">
   <img src="xxx">
</div>
<div className="col-sm-6">
   <img src="xxx">
</div>

img的宽度是div的100％，占整个屏幕的50％。如果我调整浏览器的大小，则会更改图像的宽度。在这种情况下，如何保持高度仍然与宽度相同？

Answer 1

取决于图像的宽高比。

1. 如果要将图像拉伸到正方形：因为容器<div>占整个屏幕的50％。您可以将其写为width: 50vw; （视口宽度的50％）。您的图片也是如此：width: 50vw;并保持高度与宽度相同。：

.col-sm-6 img {
  width: 50vw;
  height: 50vw;
}

1. 如果图像是方形，只需调整宽度即可。高度会自动适应。由于您必须使用 Bootstrap （从类名col-sm-6中猜测）。

2. 如果图像始终为全景：

.container {
  width: 50vw;
  height: 50vw;
  border: 1px solid lime;
  overflow: hidden;
}

.container img {
  height: 100%;
  min-width: 100%;
}

<div class="container">
  <img src="http://www.w3schools.com/css/img_lights.jpg">
</div>

1. 对于始终垂直的图像，上面的逻辑相同。

Answer 2

您可以将此wrapper的宽度设置为等于width和height，将width和height的宽度设置为img }}

另一个选项

您还可以使用padding总是根据CSS中的width计算的事实 -

1. 将img 绝对相对于包装

放置

2. 为padding-top和width（每个50vw）提供相同的值，并为height将wrapper设置为零。

3. 为width: 100%

提供img

见下面的演示：

body {
  margin: 0;
}
.wrapper {
  width: 50vw;
  height:0;
  padding-top: 50vw;
  position: relative;
}
.wrapper img {
  width:100%;
  height: 100%;
  top:0;
  left: 0;
  position: absolute;
  vertical-align:top;
}

<div class="wrapper">
   <img src="http://placehold.it/250x250">
</div>

请注意，如果不是方形图片，您的图片可能会延长 - 您可以根据您的设计选择以放弃width: 100%或{ {1}}这样就不会发生拉伸。 （或选择使用方形图像！）

见下面的演示：

height: 100%

body {
  margin: 0;
}
.wrapper {
  width: 50vw;
  height:0;
  padding-top: 50vw;
  position: relative;
}
.wrapper img {
  width:100%;
  height: 100%;
  top:0;
  left: 0;
  position: absolute;
  vertical-align: top;
}

Answer 3

通常如果宽度为auto，则高度固定硬件，反之亦然，如果您希望自动高度为当前div的自动高度