html - CSS使图像适合元素高度并在调整大小时保持比例

Question

我创建了一个元素，左侧是图像，右侧是文本。

在屏幕调整大小时，我想保持图像比例，同时让它在元素中垂直延伸。相反，图像会像这样缩小：

如何始终保持图像在高度上扩展但保持其纵横比？

我在我的代码中使用 flex

代码笔： https ://codepen.io/anon/pen/pYmjMK

.container {
  width: 100%;
  max-width: 860px;
}

.item {
 display: flex;
 background-color: #ddd;
}

.image {
  width: 30%;
  position: relative;
}

.image:before {
  content: "";
  display: block;
  padding-bottom: 65%;
}

img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}

.text {
  width: 70%;
  padding: 15px;
}

.image a {
  display: block;
  width: 100%;
}

标签： htmlcssflexbox

Answer 1

将此 css 添加到您的 img 标签：

width: auto;
height: 100%;

并将其放在您的 div.image 上：

overflow: hidden;

然后你可能想玩弄定位，使图像居中而不是左/上对齐。