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

【问题标题】：How to use CSS to set height of image the same as width如何使用 CSS 将图像的高度设置为与宽度相同
【发布时间】：2017-05-27 01:04:58
【问题描述】：

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

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

img的宽度是div的100%，也就是整个屏幕的50%。如果我调整浏览器的大小，图像的宽度会改变。这种情况下，如何保持高度和宽度一样？

【问题讨论】：

标签： html css image responsive-design css-position

【解决方案1】：

这取决于图像的纵横比。

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

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

如果图像是正方形，只需调整宽度即可。高度会自动适应。由于您必须使用 Bootstrap （根据类名 col-sm-6 猜测）。
如果图像始终为全景：

.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>

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

【讨论】：

【解决方案2】：

您可以将wrapper 的宽度设置为等于width 和height 对于这个和100% width 和height 对于img。

另一种选择

您还可以使用 padding 始终基于 CSS 中的 width 计算的事实-

将img 绝对相对于它的包装器
为padding-top 和width（各50vw）赋予相同的值，并将wrapper 的height 设置为零。
为img 提供width: 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;
}

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

请注意，如果您的图像不是方形图像，您的图像可能会拉伸 - 您可以根据您的设计选择删除width: 100% 或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;
}

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

【讨论】：

【解决方案3】：

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

【讨论】：