Question

我有一个container，并希望根据内部height的大小调整此容器的image大小。

HTML：

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

CSS：

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

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

有人知道我应该怎么做吗？

Answer 1

以下可能会解决问题，对display: inline-block容器使用figure并使用display: block删除图像后的额外空白区域。

内联块将为您提供图像周围的缩小高度和宽度（以及您的情况下的链接）。

＆＃13;

.container {
  border: 1px dotted blue; /* for demo only */
  display: inline-block;
}
.container img {
  display: block;
}

＆＃13;

<figure class="container">
   <a class = "123">
      <img class="item" src="http://placehold.it/200x100">
   </a>
</figure>

＆＃13;

Answer 2

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

容器将自己包裹在图像周围并相应地进行调整。

Answer 3

在调用容器之前，您调用容器中要使用的图像，获取图像的宽度和高度，现在您知道要使用它的内容，以便进行内联样式化。

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

将容器调整为图像大小

3 个答案: