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

【问题标题】：How can I stop an image element from taking 100% width?如何阻止图像元素占用 100% 宽度？
【发布时间】：2015-04-10 00:04:02
【问题描述】：

这看起来很简单，但我没有尝试任何工作...我有一个分配了类的图像。图像有一定的宽度，但是分配给图像的类占了父 div 宽度的 100%，不管我做什么。

html：

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

带 sass 的 css：

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

使用我在网上找到的各种答案，我尝试了.imagewidth: auto、display:inline 和display:inline-block 的不同组合，但无论我做什么，.image 都拒绝让步从 100%。我怎样才能使.image 只与它包含的图像一样宽？？

【问题讨论】：

标签： html css sass

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：