Question

我已创建一个网页。我有一个div，其中包含图片和一些文本以及表格。图片出在div之外。

我希望灰度线扩大以适合图像。我希望能够在其中放置任何尺寸的图像，高度（已完成）和宽度，并且尺寸还可以，因此固定宽度div不会出现问题。我也在使用flexbox样式。

这是最低可重复的代码。

.cardstyle {
  margin: 2em;
  border: 2px solid lightgray;
  overflow: visible;
}

#block_container {
  display: flex;
}

<form method="POST">
  <div id="block_container">
    <div class="cardstyle">
      <div style="width:15vw; height:15vw">
        <img src="https://cdn.iphoneincanada.ca/wp-content/uploads/2020/03/model-3.png" height="100%">
      </div>

      <br>
      <p style="font-size: 2.5vw; margin-left: 7%;">Tesla Model Y</p>
      <p style="margin-left: 7%;">Luxury Electric Car. </p>
      <p style="margin-left: 7%;">60000/each</p>
      <select style="margin-left: 7%;" name="select">
        <option value="0">0</option>
      </select>
      <br>
      <br>
    </div>
  </div>
</form>

Answer 1

尝试将display: inline放在div标记周围的img上

在这里工作的示例：https://codepen.io/annaazzam/pen/NWxwpgJ?editors=1010

Answer 2

您编写的标记！可能是更多的Web标准和语义，这里我只是在您的代码之上更新代码。

<!DOCTYPE html>
<html>

<head>
  <style>
    .cardstyle {
      margin: 2em;
      border: 2px solid lightgray;
    }
    
    #block_container {
      display: flex;
    }
    
    .cardstyle img {
      object-fit: contain;
      width: 100%;
      height: auto;
    }
  </style>
</head>

<body>
  <form method="POST">
    <div id="block_container">
      <div class="cardstyle" style="width:25vw;">

        <img src="https://cdn.iphoneincanada.ca/wp-content/uploads/2020/03/model-3.png">


        <br>
        <p style="font-size: 2.5vw; margin-left: 7%;">Tesla Model Y</p>
        <p style="margin-left: 7%;">Luxury Electric Car. </p>
        <p style="margin-left: 7%;">60000/each</p>
        <select style="margin-left: 7%;" name="select">
          <option value="0">0</option>
        </select>
        <br>
        <br>
      </div>
    </div>
  </form>
</body>

</html>

扩展HTML div以适合内容

2 个答案: