时间戳

首页 > 解决方案 > HTML 和 CSS 格式化图片作为网站底部栏

html - HTML 和 CSS 格式化图片作为网站底部栏

问题描述

我有一个简单的网页，其主要部分为 85vh，“楼层”为 15vh。floor 元素包含一个图像，我希望它看起来像页面的地板。它有一个棋盘格图案，逐渐变成白色，看起来像地板。

我当前的 CSS 工作得很好，但是，我遇到的问题是当用户使窗口变窄（宽度小于 800 像素左右）时，地板图像的星星变得非常小而且看起来不太好它看起来不再像地板了。

无论窗口的宽度或高度是多少，我应该对 CSS 进行哪些更改以使 floor 元素中的图像看起来像“页面的地板”？它可能应该居中并适应窗口宽度，但不能小于 1920 像素左右，因此地板在任何窗口宽度下看起来都相同，但会自动裁剪以适应页面宽度。

https://jsfiddle.net/z7w41vd5/

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0px auto;
}

.main {
  height: 85vh;
}

.floor {
  height: 15vh;
  min-width: 1920px;
  width: 100vw;
}

.floor img {
  width: 100%;
}
<div class='wrapper'>

  <div class='main'>

  </div>

  <div class='floor'>
    <img src='https://i.imgur.com/VuLVv68.png'>
  </div>

</div>

标签： htmlcssimage

解决方案

将其设置为背景图像而不是背景图像<img />，您将能够以您想要的方式控制它。

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0px auto;
}

.main {
    min-height: 85vh;
}

.floor {
    min-width: 1920px;
    min-height: 15vh;
    background: url(https://i.imgur.com/VuLVv68.png) bottom center;
}

<div class='wrapper'>
    <div class='main'></div>
    <div class='floor'></div>
</div>

或者，您可以将其作为背景<body>并从您的 html 中完全删除 floor 元素。

html {
  height: 100%;
}
body {
  background: url(https://i.imgur.com/VuLVv68.png) bottom center no-repeat;
  min-height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0px auto;
}

<div class='wrapper'>
    <div class='main'></div>
</div>

推荐阅读