Question

我想如果有办法让所有图像全屏显示。

使用浏览器调整大小的唯一图像是背景图像。其余图像是当您悬停列表项时淡入和淡出的图像。

body {
background: black;
width:100%;
height: 100%;
padding:0px;
margin:0px;
}
ul {
list-style:none;
background-color:#00F
}
div {
position:absolute;
z-index:0;
top:0;
left:0;
padding:0px;
margin:0px;
width:100%;
height:100%;
background: url(images/01.jpg);
}
container {
position:absolute;
z-index:1;
left:0;
right:0;
width:270px;
margin:0 0 0 10px;
}

<div id="content">
  <div id="div"></div>
  <div id="container">
    <ul>
      <li id="first">test</li>
      <li id="second">test</li>
      <li id="third">test</li>
    </ul>
  </div>
</div>

如果您将鼠标悬停在列表项上，则淡入的图像也是需要调整大小的图像。用jQuery替换背景。

我希望有人可以帮助我。

Answer 1

如果我理解你的问题，

添加到CSS div样式：

background-size: cover;

（或background-size: contain;取决于您想要的内容）

如何全屏显示所有图像？

1 个答案: