A div is inheriting it's parent's width which is not what I want

Question

Is there a way to make the div's width the same as the width of the image inside of it and ignore the width of the parent? My wrapper is 1200px, my image container's width is not set and the image inside the container is not hard coded so I can't hard code the width of the image container. I wanna make the image container wrap around the image and have the same width as it. Any way to do that?

    <?php
        include 'header.php';
        include 'includes/comments.inc.php';
        include 'includes/images.inc.php';
    ?>
    <div class="wrapper">

    <?php

        $imagePath = $_SERVER['QUERY_STRING'];
        $realImagePath = substr($imagePath, 1);

        $sql = "SELECT * FROM image WHERE path='$realImagePath'";
        $result = mysqli_query($conn, $sql);
        $getResult = mysqli_fetch_assoc($result);

        echo "<div class='imageContainer'>"
                        ."<h1>".$getResult['name'].'</h1>'
                        .'<div class="relativeContainer"><img class="uploadedRealImg" src="uploads/'.$realImagePath .'" alt="Random image" /></div>'."<br><br>"
                        .$getResult['description']."<br><br>"
                        .$getResult['date']."<br><br>"
                        .$getResult['author']."<br><br></div>";

                            if (isset($_SESSION['id'])) {
                                $id = $_SESSION['id'];
                                $sql2 = "SELECT * FROM user WHERE id='$id'";
                                $result2 = mysqli_query($conn, $sql2);
                                $getResult2 = mysqli_fetch_assoc($result2);

                                    if ($getResult2['username'] == $getResult['author']) {
                                        echo "<form method='POST' action='".deleteImage($conn)."'>
                                                <input type='hidden' name='id' value='".$getResult['id']."'>
                                                <input type='hidden' name='path' value='".$getResult['path']."'>
                                                <input type='hidden' name='author' value='".$getResult['author']."'>
                                                <button id='delImage' type='submit' name='imageDelete'>Delete Image</button>
                                            </form>";
                                        }
                                }

        echo "<form method='POST' action='".setComments($conn)."'>
                <textarea class='commentSection' name='message'></textarea><br>
                <button type='submit' name='commentSubmit'>Comment</button>
            </form>";

    ?>

    <div id="comments">
        <?php
            getComments($conn);
        ?>
    </div>

    <?php
        echo "<button id='moreComments'>Show more comments</button>";
    ?>

</div>
<?php
    include 'footer.php';
?>

css

    .wrapper {
        width: 63.1%;
      margin: 0 auto;
      height: 100%;
    }
    .imageContainer {
      text-align: center;
      position: relative;
    }
    .uploadedImg {
      width: 500px;
      height: auto;
    }
    .uploadedRealImg {
      max-width: 1200px;
    }
    .commentSection {
      width: 100%;
      height: 150px;
    }
    #delImage {
      padding: 0;
      border: none;
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0px;
      right: 0px;
    }
    .relativeContainer {
      position: relative;
    }

Answer 1

Try the !importent tag after the css you want to force apply.

i.e: css: mycssproperty!important;

Answer 2

The .imageContainer is a div, and a div is a block element. Block elements try to fill 100% of their parent width.

You can change .imageContainer to an inline-block, which fits it's contents.

.wrapper {
  background: purple;
}

.imageContainer  {
  display: inline-block;
  border: 2px solid gold;
}

.image {
  display: block; /** optional - if you need the imageContainer height to be the same as that of the image
}

<div class="wrapper">
  <div class="imageContainer">
    <img class="image" src="https://a.wattpad.com/useravatar/ReaderOfTheReads.256.435663.jpg">
  </div>
</div>

Answer 3

Yes it's possible. One of the ways is setting display: table to the image container, and make sure that the <img> element has display: block. I put together an example below. Notice the red border of the image container.

#wrapper{
  width: 1200px;
}
.image-container{
  display:table;
  border: 1px solid red;
}
.image-container img{
  display: block;
}

<div id="wrapper">
  <div class="image-container">
    <img src="https://lastfm-img2.akamaized.net/i/u/avatar300s/a96ecf5e524449ec866a6674709bb212.jpg">
  </div>
</div>