Question

我目前正在对此link进行教学。该网站为德语，但仅查看上面的代码和图片。我想在<div>上方使用<p>做类似的事情，但是图像的尺寸要大得多，因此我尝试使用width和{{1}使其更小}，但不起作用。我不知道如何使其适合该浮动元素。

提前谢谢！

html：

height

css：

<body>
  <h1>Heading 1</h1>
  <div id="picture">
    <img src="images/picture.jpg" alt="photograph">
  </div>
  <p>sampletext</p>
</body>

Answer 1

您要为容器定义大小，但不能为图像本身定义大小，因此图像将以其原始大小显示，并且由于容器没有overflow: hidden，它将从容器中移出。

添加它以使图像适合容器（嗯，height将取决于图像格式）：

编辑：评论后，我将height更改为100％，这会使图像失真。如果将其设置为auto，并同时将容器height设置为自动（或擦除它，因为这是默认设置），则根据其比例/格式，它将变高。（在这种情况下，原始图片为400x400）

#picture {
  float: right;
  width: 300px;
  height: 200px;
}

#picture img {
  width: 100%;
  height: 100%;
}

<body>
  <h1>Heading 1</h1>
  <div id="picture">
    <img src="https://lorempixel.com/400/400/" alt="photograph" />
  </div>
  <p>sampletext</p>
</body>

为什么浮动元素中图像的大小没有变化？

1 个答案: