Question

我对html / css了解了一两件事，但我不是专业人士。我有一个7,20厘米x，7,20厘米的图像，它填满了我的屏幕尺寸完美，但当我在更大的屏幕上查看它太大，所以你有滚动，它看起来不愉快.. 。如何在大屏幕上实现同样的效果？谢谢你提前给你的所有人。

HTML

<body>
<div class="logo">
    <a href="projects.html" class="transition">
      <img src="lg.png" width="40%" alt="" />
    </a>
</div>
<footer>copyright 2016 matic toni</footer>

</body>

CSS

@charset "utf-8";
div {
text-align: center;
padding-bottom: 30px;
}
body {
/* background-image: url(background.jpg);
background-sizce: cover; */
background-color: #F6F6F6;
}

.logo {
padding-top:3%;
}

footer {
font-family:"Proxima";
clear: both;
color: black;
font-size: 100%;
margin-top: 5%;
margin-right: 5%;
margin-left: 5%;
text-align: center;

}

li a img {
padding-top: 3%;
}

@font-face {
font-family: Proxima;
src: url(Fonts/Proxima_Regular.otf);
}
img.logo { max-width: 100%;

}

Answer 1

尝试一下这个

的内容

background-image: url("background.jpg");
background-attachment: fixed;
background-size: 100%;
background-repeat: no-repeat;
overflow: hidden;

请注意，这不是优化的，而是为了便于修改而组织的。

Answer 2

.bgimage{
	background: url(http://images.coolestwallpapers.com/user-content/uploads/wall/1280x854/36/091c7f2accfa32c8a9d912928a0220193e962075.jpg) no-repeat center;
	width: 100vw;
	height: 100vh;
	background-size: 100% 100%;
}

<div class="bgimage">
	
</div>

高度和宽度取决于所需的设计。

Answer 3

由于你的代码有一个页脚，图像不能真正达到100％的高度，除非你的意思是它自己的容器？

然而，我相信flex和一些使用垂直填充来设置方框，你可以做一些关闭

Idea是一个具有max-height和max-width的图像，例如包含background-size，以获得一个永远不会超过容器高度/宽度的图像，无论窗口是什么＆＃ 39;比率。

例如

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
.logo {
  width: 80vh;/* tune this , you may use calc() too */
  max-width: 80%;/* tune this */
  background: gray;
  margin: auto;
  position: relative;
}
.logo:before {
  content: '';
  display: block;
  padding-top: 100%;/* makes a square, */
}
.logo a {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
}
.logo a img {
  width: 100%;/* or height, it's a square one value is enough */
}
footer {
  text-align: center;
  background: tomato;
}

＆＃13;

<div class="logo">
  <a href="projects.html" class="transition">
    <img src="http://dummyimage.com/200x200&text=LOGO-@-center" alt="square" /><!--square of any size-->
  </a>
</div>
<footer>copyright 2016 matic toni</footer>

＆＃13;

如果我误解了，那么它将更像是背景大小：包含;所以设置的另一种方法，但再次绝对定位，以保持图像标签在HTML

如何使整个屏幕上的图像适合并避免滚动？

3 个答案: