如何阻止图像元素占据100％的宽度？

Question

这看起来很简单，但我正在努力工作......我有一个分配了一个类的图像。图像具有一定的宽度，但无论我做什么，分配给图像的类占用父div宽度的100％。

HTML：

<div class="parent">
  <%= image_tag("picture.png"), class:"image" %>
</div>

css with sass：

.parent {
  width 100%;
  position: relative;
  text-align: center;
  .image {
    position: absolute;
    height: 80%;
    max-height: 1000px;
  }
}

使用我在网络上找到的各种答案，我尝试了不同的给予.image width: auto，display:inline和display:inline-block的组合，但无论我做什么do，.image拒绝100％预算。如何使.image仅与其包含的图像一样宽？

Answer 1

<div class="parent">
    <img src="path" class="image" width="20%" />
</div>

Answer 2

事实证明我必须将类添加到图像本身，而不是erb字符串：

<div class="parent">
  <%= image_tag ("picture.png", class:"image") %>
</div>