Question

有没有办法让div的宽度与其内部图像的宽度相同，并忽略父级的宽度？我的包装器是1200px，我的图像容器的宽度没有设置，容器内的图像没有硬编码所以我不能硬编码图像容器的宽度。我想让图像容器环绕图像并具有与它相同的宽度。有办法吗？

    <?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

.imageContainer是div，div是block element。块元素尝试填充其父宽度的100％。

您可以将.imageContainer更改为符合其内容的inline-block。

.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 2

是的，这是可能的。其中一种方法是将display: table设置为图片容器，并确保<img>元素具有display: block。我在下面举了一个例子。注意图像容器的红色边框。

#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>

Answer 3

在要强制应用的CSS之后尝试使用！importent标记。

即：css：mycssproperty！important;

div继承它的父级宽度，这不是我想要的

3 个答案: