如何阻止图像元素占用 100% 的宽度？

Question

这看起来很简单，但我尝试的任何方法都不起作用...我有一张分配了 class 的图像。图像有一定的宽度，但是分配给图像的 class 占据了父 div 宽度的 100%，无论我做什么。

html:

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

css 与 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 的不同组合，但无论我所做的，.image 拒绝从 100% 改变。我怎样才能使 .image 的宽度与其包含的图像一样宽？？

Answer 1

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

Answer 2

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

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

如何阻止图像元素占用 100% 的宽度？

How can I stop an image element from taking 100% width?

html

css

sass