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/

Answer 2

为img标签提供高度。

如下所示：

img{
    height :20px;
}

现在图像将具有固定的高度，否则图像将采用height: auto。

调整<li>中的图像大小

2 个答案: