I've been struggling with what seems like a simple issue... I have an image with a certain width and assigned a class. However, no matter what I try, the class always takes up 100% of the parent div's width.
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;
}
}
After trying various solutions found online including setting .image to width: auto, display:inline, and display:inline-block, I'm still unable to get .image to adjust to the actual width of the image inside it. How can I make .image only as wide as the contained image?