Html 将容器大小调整为图像大小

我有一个

容器

，希望根据内部

图像

的大小调整此容器的

高度

HTML:

有人知道我该怎么做吗？

<figure class="container">
   <a class = "123">
      <img class="item" src="...">
   </a>
</figure>

.container {
    position: relative;
    min-width: 100%;
    margin: 0 -10px 10px
   height: auto;
   overflow: auto;
}

.item {
    width: 100%;
    border-radius: 3px
}

.集装箱{
位置：相对位置；
最小宽度：100%；
利润率：0-10px 10px
高度：自动；
溢出：自动；
}
.项目{
宽度：100%；
边界半径：3倍
}

---

容器将环绕图像并进行相应调整。

以下操作可能会实现此目的，请使用

显示：内联块

作为

图形

容器，并使用

显示：块

清除图像后的额外空白

内联块将为您提供一个收缩，以适应图像周围的高度和宽度（在您的情况下为链接）

.container{
边框：1px点蓝色；/*仅用于演示*/
显示：内联块；
}
.集装箱img{
显示：块；
}

---

在调用容器之前，先获取图像的宽度和高度，然后再调用容器中要使用的图像，这样就可以进行内联样式设置了

<?php
$img = "your image url comes here";
list($width, $height) = getimagesize($img);
echo"
<figure class='container' style='width:$width;height:$height'>
   <a class = '123'>
      <img class='item' src='$img'>
   </a>
</figure>
";
?>

---

你为什么选择figure而不是div层？@UnskilledFreak figure可能更具语义。我真的不记得了，刚才是这么做的。这与我想要实现的目标有关吗？@sehetmich不，不是。您不会根据标签的CSS属性来选择标签。这样做是基于它们的语义相关性。由于css没有父选择器，我非常确定您必须使用脚本来完成此操作。
<figure class="container">
   <a class = "123">
      <img class="item" src="...">
   </a>
</figure>

.container {
    position: relative;
    min-width: 100%;
    margin: 0 -10px 10px
   height: auto;
   overflow: auto;
}

.item {
    width: 100%;
    border-radius: 3px
}

<?php
$img = "your image url comes here";
list($width, $height) = getimagesize($img);
echo"
<figure class='container' style='width:$width;height:$height'>
   <a class = '123'>
      <img class='item' src='$img'>
   </a>
</figure>
";
?>