為什么浮動元素中圖像的大小沒有變化？

Question

我目前正在此鏈接上進行教學。 該網站為德語，但僅查看上面的代碼和圖片。 我想在<p> <div>上方使用<div>做類似的事情，但是圖像的大小要大得多，因此我嘗試通過width和height將其縮小，但是它不起作用。 我不知道如何使其適合該浮動元素。

先感謝您！！

HTML：

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

CSS：

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

Answer 1

您正在定義容器的大小，而不是圖像本身，因此圖像將以其原始大小顯示，並且由於容器沒有overflow: hidden ，它將從容器中移出。

添加它以使圖像適合容器（嗯， height取決於圖像格式）：

編輯：評論后，我將height更改為100％，這會扭曲圖像。 如果將其設置為auto ，並且還將容器height設置為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 個解決方案

解決方案1
1 已采納 2018-10-05 21:27:58

為什么浮動元素中圖像的大小沒有變化？

問題描述

1 個解決方案

解決方案1 1 已采納 2018-10-05 21:27:58

解決方案1
1 已采納 2018-10-05 21:27:58