html - 对 html 和 css 有点陌生

Question

过去 2 周我一直在使用 Html，今天才开始使用 CSS。我了解 css 的一些基础知识(一些元素以及如何使代码看起来更整洁)但是有一些我不太了解并且到目前为止还没有找到的东西。例如缩小图像。任何人都可以向我解释为什么这个 css 代码不起作用吗？

h1{
  Color: #8a1319
}
.name {
  color: #ba454b;
}
/*help with this part please? Cant figure out how to properly make it smaller*/
.joke{
  border: 2px solid red;
  max-height: 250px;
  width: 50%;
}
body {
  text-align:center;
  background: powderblue
}

<div class="name">
  <h1>Dylan Carlson</h1>
</div>
<section>
  <h1 class="title">
    website
  </h1>
  <p>
    <div class=joke>
    <img src=http://www.jeremychin.com/repository/tickled/0355.jpg class=image />
    <div>
      <br>
      <br> Age: 17
      <br>
      <br> Grade:12
      <br>
      <br> Intrest: programming
      <br>
      <br> extra curricular: N/A
      <br>
      <img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSJjXu1Ulhi3ExUJYOsgRxEcXywik5FG2B-ouj4E3RqgDIARssdQ>
    </div>
  </p>
  <p>
    Favorite Icecream: IDFK
    <br>
    <br> 
    Favorite color: Gold/Black
  </p>
</section>

Answer 1

删除图像周围的 DIV 并向类中添加笑话:

<img src="http://www.jeremychin.com/repository/tickled/0355.jpg" class="joke">

由于您将 joke 作为 DIV 的一个类，它适用于 DIV 而不是 IMG。因此，DIV 的最大高度为 250px，由于图片较大，因此重叠。

一点建议:尽可能将 CSS 保持在最低级别(在本例中是 IMG 而不是 DIV)。