html - 在 中调整图像大小

Question

希望将大图像缩小为列表项中的缩略图:

HTML代码

<div class="header">
  <ul class="nav">
    <li><a href="index.html"><img src="imgs/logo.jpg"></a></li>
    <li><a href="index.html">About</a></li>             
    <li><a href="index.html">Contact</a></li>
  </ul>
</div>

CSS代码

.header {
  width: 100%;
}
.nav {
  max-width: 92.5%;
  margin: 0 auto;
  padding: 1% 0% 0.75% 1%;
}
.nav li {
  display: inline;
  font-family: 'Raleway', sans-serif;
  font-size: 1em;
  font-weight: 600;
  margin-right: 2%;
}

无论我尝试什么，图像都会从 li“框”中跳出......我显然可以调整它的大小以适应内部，但我希望它占据整个 li 框基于其他 li 有多大...有什么建议吗？

Answer 1

添加图片作为背景:

background-image: url('https://www.w3schools.com/css/img_fjords.jpg');

检查这个

https://jsfiddle.net/nqo79yxm/4/